<div class="container" id="con"> <div class="item"> <img src="../img/1.jpeg" alt=""> </div> <div class="item"> <img src="../img/2.jpeg" alt=""> </div> <div class="item"> <img src="../img/3.jpeg" alt=""> </div> <div class="item"> <img src="../img/4.jpeg" alt=""> </div> <div class="item"> <img src="../img/5.jpeg" alt=""> </div> <div class="item"> <img src="../img/6.jpeg" alt=""> </div> <div class="item"> <img src="../img/7.jpeg" alt=""> </div> <div class="item"> <img src="../img/8.jpeg" alt=""> </div> <div class="item"> <img src="../img/9.jpeg" alt=""> </div> <div class="item"> <img src="../img/10.jpeg" alt=""> </div> <div class="item"> <img src="../img/11.jpeg" alt=""> </div> <div class="item"> <img src="../img/12.jpeg" alt=""> </div> <div class="item"> <img src="../img/13.jpeg" alt=""> </div> <div class="item"> <img src="../img/14.jpeg" alt=""> </div> <div class="item"> <img src="../img/15.jpeg" alt=""> </div> </div>
1.正常css实现
.container{ column-count: 4;//想要排成的列数 column-gap: 0; } .item img{ width: 100%; }
2.使用弹性布局实现
.container{ display: flex; flex-direction: column; flex-wrap: wrap; /* 需要指定高度 */ height: 800px; } .item{ width: 25%; } .item img{ width: 100%; }
瀑布流是可以用css直接实现的，但是用js实现的话，实用性更高，但是初学者尽量使用css来实现，如果直接用js来实现的话，会有点不理解，等掌握了一定基础时，可以尝试扩展一下思维。
