0

最近のプロジェクト用にアイソトープをセットアップし、これをページの下部に追加しました

<script type="text/javascript">
$('#isotope').isotope({
layoutMode : 'masonry',
itemSelector : '.isotope-item'
});
</script>

しかし、うまくいきません。すべてのアイテムが上下に表示されます。これは、.isotope-item div で取得したものです。垂直方向の配置のみが配置され、水平方向の配置は配置されません。

position: absolute;
left: 0px;
top: 0px;
-webkit-transform: translate3d(0px, 1103px, 0px)

私はこれが何であるかを理解しようとしており、助けていただければ幸いです。

4

1 に答える 1

1

同位体の組積造レイアウトは、デフォルトで最初のアイテムの幅を使用します。これがコンテナー幅の半分を超える場合、それらはすべて 1 つの列に表示されます。

テストとして、幅を小さな数値に設定してみてください。

<script type="text/javascript">
$('#isotope').isotope({
  layoutMode : 'masonry',
  masonry: {
      columnWidth: 5
  }
  itemSelector : '.isotope-item'
});
</script>

数値が非常に小さいことの欠点はcolumnWidth、同位体が高さを計算するためにより多くの列を作成することです。これは遅くなり、より多くのメモリを使用します。

于 2013-05-16T13:33:45.233 に答える