我正在我正在开发的 WordPress 主题上使用 jquery masonry。在努力让它工作一段时间后,我发现:
<script type="text/javascript">
jQuery(function () {
jQuery('#masonry-wrap').masonry({
itemSelector: '.masonry-box',
columnWidth: 283
});
})
</script>
似乎对我来说工作正常...但是在 Chrome 和 Safari 中检查站点会将包含元素的底部推入以下元素...
现在我在某处读到,这可以通过使用 imagesLoaded 插件和我在这里找到的代码来解决:http://masonry.desandro.com/demos/images.html http://masonry.desandro.com/demos/images.html- 然而,由于我对 jQuery 非常糟糕,所以我在让它工作时遇到了一些困难。
谁能帮我将它合并到我已经使用的并且有效的代码中(上面的代码)?
任何帮助将不胜感激!!朱利安
我认为这应该对你有用;
// Masonry Trigger
var $container = jQuery('#masonry-wrap');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector: '.masonry-box',
columnWidth: 283
});
})
请记住使用最新版本的imageLoaded,前一段时间我遇到了问题,原因是我的版本稍微过时了。
EDIT
也就是说,我仅在通过 AJAX 加载新内容并使用 reLayout 方法时才使用 imagesLoaded。如果在加载图像后在 $window.load() 上运行 masonry,它也应该运行良好。
(function($){
$(window).load(function() {
// Masonry Trigger
var $container = $('#masonry-wrap');
$container.masonry({
// options
itemSelector: '.masonry-box',
columnWidth: 283
});
});
})(jQuery);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)