0

我正在尝试安排几个动态多尺寸的 DIV 以适合容器。根据 stackoverflow 中的成员建议，我正在尝试利用 jquery masonry 来完成我的工作。但我有如下所述的问题。

他们在使用 jquery masonry 解决这个问题时有什么特别的技巧吗？我阅读了他们的文档，但我肯定错过了一些东西。

如果有人可以提供帮助，将不胜感激。

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

我认为在此布局中使用 Masonry 没有问题，只要容器大小正确，您将获得所需的格式。

我已经在 jsFiddle中设置了你的示例，它似乎工作正常。

HTML（与您的相同）

<div id="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>

脚本（为在 jsfiddle 中使用而简化）

$(function(){
    $('#blockscont').masonry({
      itemSelector: '.blocks'
    });
});

我删除了该选项columnWidth : 0，因为它似乎没有任何区别。

CSS 

.blocks {
    background-color: #D7E4BC;
    outline:1px solid white;
}

outline用于显示块，而不是border用于显示块，但防止它们的大小增加和弄乱布局（至少在 Chrome 中）。

不需要将浮动应用到任何元素，因为 Masonry 的工作是定位块。

于 2013-07-01T11:48:37.410 回答
0

Just for posterity (as i came across this while having a similar problem) Gaps in the layout can be cause by incorrectly setting the columnWidth.

If you don't explicitly state the columnWidth it is taken from the width of the first item. My problem came about because my first item was supposed to cross two columns. I got over this by using another item's width to set columnWidth.

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