0

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

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

我的脚本（我在此块之前包含了最新的 jquery、masonry 和 imagesLoaded 脚本，以及开头标签附近的 google 网络字体链接 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 中是否有冲突？我已经尝试了与我相同问题的其他答案，但我的布局仍然无法正常工作。如果您需要一个活生生的例子，请告诉我。

4

1 回答 1

0

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

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

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

JS

var $grid = $('.grid').imagesLoaded( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    gutter: 20,
    columnWidth: '.grid-sizer'
  });
 });
于 2016-03-14T19:16:57.417 回答