图片瀑布流的代码实例

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

图片瀑布流是一种网页布局效果,可以通过使用HTML、CSS和JavaScript来实现。以下是一个简单的示例代码:

HTML部分:

<div id="gallery">  
<div class="item">    
<img src="image1.jpg" alt="Image 1">  
</div>  
<div class="item">    
<img src="image2.jpg" alt="Image 2">  
</div>  
<div class="item">    
<img 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库):

$(window).on('load resize', function() {  // 当窗口加载或调整大小时触发布局  
$('#gallery').masonry({    
itemSelector: '.item',    
columnWidth: '.item',    
percentPosition: true  
});
});

这段代码使用了CSS的多列布局和jQuery的瀑布流插件Masonry来实现图片瀑布流效果。你可以根据需要调整列数、间距和其他样式细节来满足你的需求,并添加更多图片项目。记得在img标签中替换实际的图片路径。

END