html瀑布式原理,3种方式实现瀑布流布局小结

前言

今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。

一、JS 实现瀑布流

思路分析

瀑布流布局的特点是等宽不等高。

为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。

父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。

代码实现

.box {

width: 100%;

position:relative;

}

.item {

position: absolute;

}

.item img{

width: 100%;

height:100%;

}