Question

您好！我试图让这个砌体网格正确显示，意味着所有方面的空间相等，它应该像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。我知道它必须是我想念的简单东西，但我无法弄清楚它是什么！提前谢谢！

Answer 1

试试这个：

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

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

您不应该在网格项之间使用边距;在计算尺寸时，砌体不会将其包含在网格项的宽度中，并且您已使用jquery将其设置为装订线。

Answer 2

这是一个经常导致非常烦人的问题：网格在本地计算机上正常工作，但只要您将其上传到客户端服务器，他们就声称它不起作用并且看起来很糟糕。介绍：网络滞后。

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

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

您还可以使用progress方法并在加载图像时布局网格。这是这样的：

// 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');
});

Answer 3

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

});
});
});

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

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

3 个答案: