介绍
几种瀑布流实现
代码参考地址: https://github.com/wangs0622/BigLearning
JS 实现瀑布流 WaterFall_1
基于绝对定位与相对定位实现。 将父元素的样式设置为 position: relative,其中的子元素样式设置为 position: absolute。通过子元素的 top left 属性,定位子元素相对于父元素的位置,从而实现瀑布流布局。
每次请求到数据之后,计算当前高度最小的列, 然后将该图片放置在该列的最下方。
column-count CSS3 瀑布流实现 WaterFall_2
通过 CSS3 中的 column-count 实现