html延迟加载布局,解决瀑布流风格lazyload延迟加载后布局错位问题

在使用瀑布流模板时，如果你想用lazyload延迟加载技术来延迟加载图片，你就会发现所有本来可以自动根据图片大小堆上去的瀑布流小方格都会错位叠在一起了。这是为什么呢？其实道理很简单，在启用lazyload后，是用一张1个像素的超小图片替换所有的图片，这样瀑布流布局就无法计算出真实的占位图片大小，也就没办法确定方块的布局了。所以要解决瀑布流错位问题的关键就是要在加载被延迟加载的图片后重新排列布局(reLayout)即可解决错位问题。我用的是isotope瀑布流风格，以下是我的解决方案，并不一定适用你的情况，但可以说明其工作原理，你可以根据此原理自行修改自己的JS代码。

// Fix lazyload issue

$(document).ready(function () {

var $container = $('#main-content #grid');

var $imgs = $("img");

$container.imagesLoaded(function () {

$container.isotope({

itemSelector: '.item-list'

});

$imgs.load(function () {

$container.isotope('reLayout');

});

});

});

本文地址：http://www.wpzhinan.com/jiaocheng/1817.html

版权申明：除部分代码外，本站内容均为原创，转载请注明来源，违者必究侵权责任！