Question

我很久以前就开始学习砖石了。我想用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

删除1200px宽度并将容器ID添加到包含博客帖子的元素以用作砌体选择器。检查小提琴波纹管，用简单的砌体代码替换所有JS（它为你调整大小）

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

Fiddle

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

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

1 个答案: