html - 在再次调整窗口大小之前不会触发 masonry 布局

Question

我不久前开始学习 masonry 。我想使用 Masonry 来布局我的网站，一切正常，但有一个问题。

我编写了一个调整窗口大小的代码。当有人调整窗口大小时， masonry 布局更改页面宽度的关键。我没有用 Masonry 做到这一点，所以我用这段代码做到了但是当我运行这段代码时，出现了问题，并且 Masonry 布局在下一个窗口调整大小时发生了变化。不知道哪里出了问题。

这是 jsfiddle 演示: DEMO

<script>
var doit;
window.onresize = function myFunction() {
clearTimeout(doit);
doit = setTimeout(function() {
    resizedw();
}, 1001);}


function resizedw(){
var w = window;
var d = document;
var e = d.documentElement;
var g = d.getElementsByTagName('body')[0];
var originalwidth = w.innerWidth || e.clientWidth || g.clientWidth; // sayfa boyutu
var orpagewidth = parseInt(originalwidth/200);

    var csswidth = $('#section_bg').css('width'); //returns 20px
var parsedcsswidth = parseInt(csswidth); //returns 20 div boyutu
var orcsswidth = parseInt(parsedcsswidth/200);

if (parsedcsswidth != originalwidth ){
if (parsedcsswidth > originalwidth ){ 
    $(".section_bg").animate({width:orpagewidth*200}, 500);}

if (parsedcsswidth < originalwidth ){ 
    $(".section_bg").animate({width:orpagewidth*200}, 500);}
}
}  
</script>

Answer 1

删除了 1200 像素的宽度，并向包含博客文章的元素添加了容器 ID，以用作 masonry 选择器。检查下面的 fiddle ，将所有 JS 替换为简单的 masonry 代码(它会为您进行调整大小计算)

$('#container').masonry({
   columnWidth: 190,
   gutter: 10,
   isAnimated: true,
   itemSelector: '.blogpost',
   isFitWidth: true
});

Fiddle

编辑:如果您希望博文居中，您可以将 isFitWidth 设置为 true，更新 fiddle 以显示这一点