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

Question

我一直在使用 Masonry、Infinite Scrolling 和 Images Loaded 制作网格组合 Tumblr 主题。我终于让一切看起来都正确并定位在我想要的位置，但现在我无法根据浏览器 window 调整 posts/photos 的大小。如果有人可以提供帮助，我将不胜感激。如果有帮助，我可以 post 我的整个 Tumblr 主题代码。这是我正在处理的主题的 link：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 已加载脚本

<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

试试这个 css

img {
    height: auto;
    width: 100%;
    display: block;
}

Answer 2

在 window 调整大小后尝试调用 $tumblelog.masonry()。您可以使用事件 $(window).on("resize", <yourfunction>) 来跟踪它。

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

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

Responsive Masonry Grid theme with infinite scrolling

css

tumblr

masonry