Jquery砌体高度问题

我有一个简单的石工网格。当它加载.content类是可见的。当你重新加载项目相互流入。Jquery砌体高度问题

这只发生在Chrome和Safari中，在Firefox中看起来不错。

下面是来自电网的CSS：

#media_list {} 
#media_list .media_item { height: auto; width: 270px; display: inline-block; background: #f4f4f4; border: 1px solid #d9d7d5; float: left; padding: 10px 0px 10px 0px; font: 11px Helvetica Neue; } 
#media_list .media_item .date { color: white; background: #2f343a; padding: 10px 5px; width: 260px; float: left; margin: 0px 0px 15px 0px;} 
#media_list .media_item .content { padding: 15px; float: left; display: inline-block; margin-bottom: 20px; } 
#media_list .media_item img { border: 1px solid #dedddd; margin: 0px 0px 10px 10px; width: 248px;}

这是砖石怎么叫：

$('#media_list').masonry({ // options 
          itemSelector : '.media_item', 
          columnWidth : 300 
         });

我能解决它与min-height S和margin秒，但，这不是动态的，没有按看起来很干净。

这里是a JS Fiddle但它并没有真正复制这个问题。

来源

2011-08-31 papacostas

如果我运行$（'＃media_list'）。masonry（'reload'）;在控制台它解决了这个问题。不知道如何做到这一点每次加载虽然 – papacostas

我不明白这个问题:(它是做错了什么？而且你可以随时延长石工与重新加载像你说的：p –

以及我的两件事1）为什么当你从url直接访问它时，它看起来不同，当你按下重新加载。 2）什么是一个很好的jQuery事件来执行$（'＃media_list'）。masonry（'reload'）;命令？ – papacostas

似乎你已经在使用重新加载。也许是因为图像重新加载URL刷新而不是重新加载。

尝试：

var $container = $('#media_list'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector : '.media_item', 
     columnWidth : 300, 
     gutterWidth: 20 
    }); 
});

否则

$('#media_list').masonry({ 
    // options 
    itemSelector : '.media_item', 
    columnWidth : 300, 
    gutterWidth: 20 
}).masonry('reload');

来源

2011-08-31 12:55:11

我没有意识到图像加载插件 - 谢谢你！这里的插件的更多信息：http://metafizzy.co/blog/imagesloaded-plugin/ –

对于谷歌浏览器，例如更好的兼容性，改变

var $container = $('#media_list');

到

$(window).load(function(){ $('#media_list').masonry(); });

来源

2014-02-08 22:30:15

这似乎更好的意义，如果你有很多的JS加载。我的布局会在doc.ready中变得乱七八糟...非常感谢解决方案 –

这对我有用。这需要与imagesLoaded（）的组合。 – Nate

Jquery砌体高度问题

回答

相关问题