Question

我使用砌体+ imagesLoaded用于包含具有多个图像的div的流体容器（无限滚动），并且div的列数根据屏幕大小而变化。我还使用了1个谷歌网络字体。

我的问题是imagesLoaded似乎不起作用？我的容器的div仍然重叠。

我的脚本（我在此块之前包含了最新的jquery，masonry和imagesLoaded脚本，并且在开头标记附近包含了google web字体链接href）：

$(function() {
        var $posts = $('#posts');
        $posts.imagesLoaded(function(){
            $posts.masonry({
                isFitWidth:true,
                colummnWidth:600,
                itemSelector:'.post',
                isAnimated:true,
                transitionDuration:'.5s'
            });
        });
    });

和相关的CSS（它不是很多）

#posts {
    z-index:98;
    position:absolute!important;
    height:auto!important;
    margin:auto;
    left:0;
    right:0;
    top:40%; }

.post {
    float:left;
    position:relative;
    padding:25px;
    width:500px;
    margin:75px 50px 100px; }

我的CSS中是否存在冲突？我和其他人一样尝试过与我相同的问题，但我的布局仍然无法正常工作。如果您需要一个实例，请告诉我。

Answer 1

请尝试David DeSandro在文档中发布的示例js。

http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

我遇到了同样的问题，我将columnWidth切换为类似他的选择器，并添加了percentPosition和gutter，这解决了我的问题。

JS

var $grid = $('.grid').imagesLoaded( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    gutter: 20,
    columnWidth: '.grid-sizer'
  });
 });

即使在使用imagesLoaded之后，砌体也会重叠

1 个答案: