图片瀑布流的代码,图片延时加载

发布时间:
2023-07-30 10:04
阅读量:
54

如果你想要实现图片瀑布流时延时加载的效果,可以使用一个叫做LazyLoad的JavaScript插件。以下是修改后的代码示例:

HTML部分:

<div id="gallery">  
<div class="item">    
<img class="lazy" data-src="image1.jpg" alt="Image 1">  
</div>  
<div class="item">    
<img class="lazy" data-src="image2.jpg" alt="Image 2">  
</div>  
<div class="item">    
<img class="lazy" data-src="image3.jpg" alt="Image 3">  
</div>  
<!-- 继续添加更多项目 -->
</div>

CSS部分:

#gallery {  
column-count: 3; /* 指定列数,可以根据需要调整 */  
column-gap: 10px; /* 列与列之间的间距,可以根据需要调整 */
}
.item {  
display: inline-block;  width: 100%; /* 项目宽度占满列宽 */  
margin-bottom: 10px; /* 项目之间的垂直间距,可以根据需要调整 */
}
.item img {  
width: 100%; /* 图片宽度占满项目宽度 */  
height: auto; /* 图片高度自适应比例 */
}

JavaScript部分(使用jQuery库和LazyLoad插件):

$(document).ready(function() {  
var lazyLoadInstance = new LazyLoad({    
elements_selector: ".lazy",    
threshold: 500 // 需要滚动到离可视区域底部500px处时加载图片  
});    
$(window).on('load resize', function() {    // 当窗口加载或调整大小时触发布局    
$('#gallery').masonry({      
itemSelector: '.item',      
columnWidth: '.item',      
percentPosition: true    
});  
});
});

在这个示例代码中,我们使用了LazyLoad插件来实现图片的延时加载。首先,在img标签中添加了class="lazy"和data-src属性,将src改为data-src,并为img标签添加了一个自定义的class。然后,在JavaScript部分调用了LazyLoad的构造函数,并传入了一些参数,比如要进行延时加载的图片的class名字(在这个例子中是"lazy")和加载的阈值(滚动到离可视区域底部500px处时加载图片)。最后,我们在窗口加载和调整大小时,使用Masonry重新布局,实现图片瀑布流的效果。

请确保在使用代码时,先引入了jQuery库和LazyLoad插件。你可以根据需要稍作修改来满足自己的需求,并替换实际的图片路径。

END