0

コンテナに収まるように、動的にマルチサイズのDIVをいくつか配置しようとしています。ここスタックオーバーフローでのメンバーのアドバイスによると、私は自分の仕事を成し遂げるためにjquery組積造の恩恵を受けようとしています。しかし、私は以下に説明するように問題があります。

この問題を解決するためにjquery石積みを使用するときの特別なトリックはありますか？私は彼らのドキュメントを読みましたが、確かに何かを逃しました。

誰か助けていただければ幸いです。

HTMLコード：

<div class="blockscont">
    <div class="blocks" style="width:200px;height:200px">A</div>
    <div class="blocks" style="width:400px;height:400px">B</div>
    <div class="blocks" style="width:200px;height:200px">C</div>
    <div class="blocks" style="width:200px;height:200px">D</div>
    <div class="blocks" style="width:200px;height:200px">E</div>
    <div class="blocks" style="width:200px;height:200px">F</div>
    <div class="blocks" style="width:600px;height:200px">G</div>
    <div class="blocks" style="width:200px;height:200px">H</div>
    <div class="blocks" style="width:200px;height:200px">I</div>
    <div class="blocks" style="width:400px;height:200px">J</div>
</div>

JQUERY組積造：

$(function() {
    $(window).load(function(){
        $('#blockscont').masonry({
            itemSelector : '.blocks',
            columnWidth : 0
        });
    });
});

出力： 例

4

2 に答える 2

0

後世のために（同様の問題を抱えているときにこれに遭遇したため）、レイアウトのギャップは、列幅を誤って設定することによって発生する可能性があります。

columnWidth を明示的に指定しない場合、最初の項目の幅から取得されます。最初の項目が 2 つの列をまたがるはずだったため、問題が発生しました。別のアイテムの幅を使用して columnWidth を設定することで、これを乗り越えました。

$('#m-container').masonry({
  itemSelector: '.m-item',
  columnWidth: $('.size1')[0]
});
于 2015-01-09T16:45:47.790 に答える