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

【问题标题】：Responsive Masonry Grid theme with infinite scrolling具有无限滚动的响应式 Masonry Grid 主题
【发布时间】：2018-08-12 19:17:13
【问题描述】：

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

【问题讨论】：

标签： css tumblr masonry

【解决方案1】：

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

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

【讨论】：

这听起来像是我需要的。我不太擅长 Jquery，所以我不太确定如何将它添加到 Masonry 脚本中。另外，你知道我怎样才能让我的砖石容器 div 在保持页面居中的同时保持响应吗？我的容器是 .content。非常感谢您的帮助。

【解决方案2】：

试试这个 CSS

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

【讨论】：

不幸的是，这对我没有任何帮助。谢谢你的建议。