0

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

我做了一个调整窗口大小的代码。当有人调整窗口大小时，砌体布局将关键更改为页面宽度。我没有用 Masonry 做，所以我用这段代码做但是当我运行这段代码时，出了点问题，Masonry 布局改变了下一个窗口调整大小。我不知道问题出在哪里。

这是 jsfiddle 演示：演示

<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>
4

1 回答 1

1

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

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

小提琴

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

于 2014-09-03T14:11:58.557 回答