即使在唱 jquery Masonry 之后，DIV 之间的空间也是如此答案

【问题标题】：Space between DIVs even after sing jquery Masonry即使在唱 jquery Masonry 之后，DIV 之间的空间也是如此
【发布时间】：2013-03-19 17:26:01
【问题描述】：

我正在尝试安排几个动态多尺寸的 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
        });
    });
});

输出：

【问题讨论】：

标签： jquery-masonry

【解决方案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 用于显示块，而不是border，但防止它们的大小增加和弄乱布局（至少在 Chrome 中）。

没有必要对任何元素应用浮动，因为砌块的位置是 Masonry 的工作。

【讨论】：

【解决方案2】：

只是为了后代（因为我在遇到类似问题时遇到了这个问题）布局中的间隙可能是由于不正确地设置 columnWidth 造成的。

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

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

【讨论】：