我已经阅读了很多这方面的帖子,但没有任何效果!这是一个快速.gif的正在发生的事情 - http://benadelt.com/tweet-grid.gif
我正在使用Masonry并像这样加载脚本:
$(window).load(function() {
var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
// options
columnWidth: '.item',
itemSelector: '.item',
transitionDuration: '0.2s'
});
});
我在多个页面上的多个元素上使用.item类来对各种网格进行Masonrize,除了我正在尝试创建嵌入式推文网格(Bootstrap)之外,它们都完美无缺:
<div class="container">
<div class="masonry">
<div class="row">
<div class="item col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="tweet-box">
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/geofeedia">@geofeedia</a> can't wait for the ability to do geo-fenced and hashtag/keyword searches in geofeedia ... get it to us quick ! <a href="https://twitter.com/search?q=%23smem&src=hash">#smem</a></p>— Patrice Cloutier (@patricecloutier) <a href="https://twitter.com/patricecloutier/statuses/368417800307499008">August 16, 2013</a> </blockquote>
</div>
</div>
</div>
</div>
</div>
当Masonry正在研究那个网格时,在初始加载时它没有正确间隔。这是我的其他网格之前发生的,直到我调用窗口加载而不是doc ready。
这是一个使用完全相同标记的网格的.gif文件,除了网格内部只是文本而不是嵌入的推文:http://benadelt.com/other-grid.gif
想法?