一、JS 实现瀑布流
思路分析
瀑布流布局的特点是等宽不等高。
为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推。
父元素设置为相对定位,图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。
代码实现
<html><head> <style> .box {
width: 100%; position:relative; } .item {
position: absolute; } .item img{
width: 100%; height:100%; }style>head><body><div class="box"> <div class="item"> <img src="banner.jpg" alt="" /> div> <div class="item"> <img src="show.jpg" alt="" /> div> <div class="item"> <img src="cloth.jpg" alt="" /> div> <div class="item"> <img src="banner.jpg" alt="" /> div> <div class="item"> <img src="show.jpg" alt="" /> div> <div class="item"> <img src="cloth.jpg" alt="" /> div> <div class="item"> <img src="banner.jpg" alt="" /> div> <div class="item"> <img src="show.jpg" alt="" /> div> <div class="item"> <img