DIV之间的空间即使在唱歌jquery Masonry之后

Question

我正在尝试安排几个动态多尺寸的DIV以适应容器。根据成员在stackoverflow中的建议，我试图获得jquery砌体的好处来完成我的工作。但我有如下所述的问题。

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

如果有人可以提供帮助，我们将非常感激。

HTML CODE：

<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 MASONRY：

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

输出：

Answer 1

我没有看到使用Masonry进行此布局的问题，只要容器尺寸正确，您就可以获得所需的格式。

我已经设置了your example in 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来显示块，但是阻止它们的大小增加并且弄乱布局（至少在Chrome中）。

不需要将浮子应用于任何元素，因为砌体的工作是定位块。

Answer 2

仅适用于后代（因为我在遇到类似问题时遇到过这种情况）布局中的差距可能是由于错误地设置了columnWidth造成的。

如果没有明确说明columnWidth，则取自第一个项目的宽度。我的问题来了，因为我的第一个项目应该跨越两列。我通过使用另一个项目的宽度设置columnWidth来克服这个问题。

$('#m-container').masonry({
  itemSelector: '.m-item',
  columnWidth: $('.size1')[0]
});