在再次调整窗口大小之前不会触发砌体布局答案

【问题标题】：Masonry layout not triggered until window is again resized在再次调整窗口大小之前不会触发砌体布局
【发布时间】：2014-09-03 13:45:36
【问题描述】：

我不久前开始学习砌石。我想使用 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>

【问题讨论】：

fiddlelink 没有设置
我现在设置 fiddlelink。
@BerkAltun 您已将其设置为仅在调整大小时执行。不是在页面加载时......我什至不确定你对此做了什么......我以前使用过 Masonry 并且从未使用过这么多代码。
我想把布局放在页面中间。当页面调整大小时，脚本会带来页面宽度并更改布局宽度。
@BerkAltun 我不明白你的意思，更清楚你想要什么。您无需计算页面的宽度。使用百分比，这是你试图做的事情的一个愚蠢的干净版本DEMO。

标签： html css layout jquery-masonry masonry

【解决方案1】：

移除了 1200 像素的宽度，并将容器 ID 添加到包含博文的元素中，以用作砌体选择器。检查下面的小提琴，用简单的砌体代码替换所有 JS（它会为您进行调整大小计算）

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

Fiddle

编辑：如果您希望博客文章居中，您可以将 isFitWidth 设置为 true，更新小提琴以显示此内容

【讨论】：

谢谢你。最好的问候...（Y）