css - 具有无限滚动的响应式 Masonry Grid 主题

Question

我一直在使用 Masonry、Infinite Scrolling 和 Images Loaded 制作网格组合 Tumblr 主题。我终于让一切看起来都正确并定位在我想要的位置，但现在我无法根据浏览器窗口调整帖子/照片的大小。如果有人可以提供帮助，我将不胜感激。如果有帮助，我可以发布我的整个 Tumblr 主题代码。这是我正在处理的主题的链接:http://theme12014my.tumblr.com/

网格布局 CSS

.article
 {margin:1px;
float:left;
   text-align:center; 
   width:300px; 
   break-inside: avoid; display:inline-block; max-width:50% auto;
}
.content {
max-width:970px;
background-color:#000;
 margin: auto; 
   }

Masonry Infinite Scroll Images Loaded 脚本

<script>(function() {
var $tumblelog = $('.content');

$tumblelog.infinitescroll({
    navSelector  : ".pagination",            
    nextSelector : ".pagination a:first",    
    itemSelector : ".article",
    bufferPx     : 50,
    done : "",
    loading: {
        finishedMsg: "<p> </p>",
        img : " ",
        msg: null,
        msgText: "<p> </p>"
    },
},
  function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            $tumblelog.masonry( 'appended', $newElems);
        });
      }
);




$tumblelog.imagesLoaded( function(){
  $tumblelog.masonry({
    columnWidth: function( containerWidth ) {
        return containerWidth / 300;
      }
  });    });
})();
</script>

Answer 1

尝试调用 $tumblelog.masonry()调整窗口大小后。您可以使用事件 $(window).on("resize", <yourfunction>)跟踪这一点。

请注意，masonry 容器本身必须负责，因为 mansory 将使用容器大小来计算应如何在屏幕上放置瓷砖。