响应式砌体网格主题与无限滚动

Question

我一直在研究网格组合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; 
   }

砌体无限滚动图像加载脚本

<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>)来跟踪它。

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

Answer 2

试试这个css

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