砌体网格未正确加载且列太宽答案

【问题标题】：Masonry grid not loading correctly and columns are too wide砌体网格未正确加载且列太宽
【发布时间】：2016-03-22 02:50:07
【问题描述】：

link to page

你好！我试图让这个砖石网格正确显示，这意味着所有边的空间相等，它应该像here一样均匀堆叠。

页面首次加载时，它看起来像this。所有的盒子都折叠在彼此的顶部，就像每个盒子后面都缺少一列。当您刷新页面时，它看起来像this，这正是我正在寻找的，除了全宽应该有 4 列但它只显示为 2，与上次相同.. 就像有一个边距在列之间，而不是像应该有的那样有另一列。框下方的间距正是我想要的所有方面。

这是我的代码：

脚本标签

<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js">    </script>

HTML/jQuery:

<div id="MainContent" class="fullwidth">
<div style="width: 100%;height:20px;clear:both;"></div>
<div class="title">BOLD COLORS</div>
<div class="subtitle">Scrubs & Beyond Lookbook</div>


<div class="grid">
<div class="grid-sizer"></div>
<div class="product-box grid-item">
    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
Here is one with just a little bit of text

</div>
<div class="product-box grid-item">
    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
 Here is one with just a little bit of text, plus a lot more text so we can get a good idea of how these things are going to stack eventually
</div>
 <div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
<div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
<div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
<div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
<div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
<div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
<div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
<div class="product-box grid-item">

    <a href="#"><img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&scl=1"></a>
</div>
</div><!-- end grid -->
<div style="width: 100%;height:20px;clear:both;"></div>
</div>

<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 290,
gutter: 10
});

</script>

CSS：

.title {
font-family: "HelveticaNeueW01-65Medi",sans-serif;
color: #e23342;
font-size: 30px;
width: 100%;
text-align: center;
letter-spacing: 6px;
}
.subtitle {
font-family: "HelveticaNeueW01-45Ligh";
color: #8d5291;
font-size: 20px;
width: 100%;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
} 
.product-box {
padding: 5px;
background-color: #f5f5f5;
margin-right: 10px;
margin-bottom: 20px;
float: left;

}
.grid-item { width: 290px; }
.grid {
background: none!important;
}

有人可以帮我弄清楚为什么这不能正确显示吗？ The Masonry page I am working from。我知道它必须是我想念的简单的东西，但我就是不知道它是什么！提前致谢！

【问题讨论】：

对我来说没问题。一切看起来都应该如此。尝试其他浏览器
@HonzaSedloň 几乎是正确的，应该有 4 列而不是 2 列，但我不知道为什么要在它们之间添加所有空间
我仍然认为，一切都很好。看：ctrlv.cz/XJ87 可能你的分辨率有问题。
@HonzaSedloň 第一行看起来不错，但第二行第一项应该一直在左边，这有意义吗？它应该是一个完整的网格
您不需要 fitColumns。只用砖头。并摆脱产品盒上的边距，它们会弄乱您的布局。还将整个砌体代码包装在jQuery(document).ready(function($) { // your code here }); 调用中

标签： jquery html css

【解决方案1】：

试试这个：

.product-box {
   box-sizing: border-box;
   margin-bottom: 20px;
   float: left;
   border: 5px solid #f5f5f5;
}

.product-box img {
   width: 100%;
}

您不应该在网格项目之间使用边距； masonry 在计算尺寸时不会将其包含在网格项的宽度中，并且您已经使用 jquery 将其设置为排水沟。

【讨论】：

我试过了，但它仍然作为自身的折叠版本加载，然后在重新加载时显示稍微好一些。但仍然没有形成完美的网格

【解决方案2】：

这是一个经常导致非常烦人的情况的问题：网格在您的本地计算机上运行良好，但一旦您将其上传到您的客户端服务器，他们就会声称它无法正常工作并且看起来很糟糕。简介：网络延迟。

原因： 如果您在图像完成加载之前布局网格，则砖石网格和图像的行为可能会不一致。防止这种情况的方法是首先初始化网格，而不使用布局。然后等到图像加载完毕，然后布局网格。您也可以在布局之前设置opacity: 0;，然后在最后更改（注意：不要使用display: none;，因为这样元素的宽度和高度为0，布局将不起作用）。

要检查图像是否已加载，您可以使用imagesloaded.js

您也可以只使用进度方法并在加载图像时布局网格。这就是它的样子：

// init Isotope
var $grid = $('.grid').isotope({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 290,
  gutter: 10
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

你也发现这个问题in the docs

编辑：对于砌体布局，尝试添加砌体选项：

var $grid = $('.grid').isotope({
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 290,
    gutter: 10
  }
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

【讨论】：

It is almost working correctly! 如果我们能让第二行一直往左走，那我们就成功了！所有这些 div 都会有不同高度的图片和图片下方不同数量的副本，所以我只需要它们全部形成一个大网格，无论高度如何
第二行是哪一行？你能澄清一下吗？
页面的第 2 行，对我来说它是这样显示的 link to image
您必须正确设置布局选项。有many different layout modes.。还要检查我的编辑。
fitColumn 正是我需要的，你能帮我设置一下吗？

【解决方案3】：

jQuery(document).ready(function($) {
$('.grid').imagesLoaded( function() {
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 300,
gutter: 10

});
});
});

我必须添加图像加载器，因为图像是在 div 之后加载的，并且使它们重叠。还必须删除边距并且只使用填充。

【讨论】：