0

Masonryプラグインを使用していますが、複数列のレイアウト (おそらく 3 列) を実現しようとしています。1 列には大きな画像があり、他の 2 列には小さな画像があります。このinstagramsグリッド レイアウトの上部にあるものと同様です。 .

画像を正方形にトリミングすることはできますが、1 つの大きな画像と 4 つの小さな画像 (列ごとに 2 つの画像) を使用する方法がわかりません。また、親の div 幅に応じて画像のサイズを変更できるはずです。Masonry にはこのようなオプションがありますか? またはこれは CSS と関係がありますか、それとも Masonry と組み合わせることができる別の jQuery プラグインはありますか?

4

1 に答える 1

1

パーセンテージベースの幅を使用できます。div のサイズを適切に設定している限り、残りは Masonry が処理します。重要な部分はcolumnWidth、CSS セレクターとして小さな div の 1 つに設定することです。http://jsfiddle.net/7Xp4T/を参照してください

HTML:

<div id="container">
    <div class="square bigsquare"></div>
    <div class="square littlesquare"></div>
    <div class="square littlesquare"></div>
    <div class="square littlesquare"></div>
    <div class="square littlesquare"></div>
</div>

CSS:

#container {
    width: 400px;
    height: 150px;
}
.square {
    border: 1px solid black;
}
.bigsquare {
    width: 40%;
    height: 100%;
    background: red;
}
.littlesquare {
    width: 20%;
    height: 50%;
    background: blue;
}

JavaScript:

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: '.littlesquare',
  itemSelector: '.square'
});
于 2013-08-11T01:35:03.000 に答える