时间：2021-07-01 10:21:17 帮助过：6人阅读
想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下
瀑布流 
效果:(未设置css属性所以都是垂直放置的)
2.通过css简单设置样式
主要设置水平放置,相框颜色,边界之类的
效果:(边框什么都有了)
3.JS控制每一行所摆放的图片个数
上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕都能做到很好的效果
效果图:针对不同屏幕大小显示的个数是不一样的
4.JS实现静态瀑布流
先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.
实现排列算法很简单
1.把第一排图片的高度全部存到一个数组
2.计算出第一排中的图片的最小高度和对应位置
3.把第一排之后的第一个图片放到该位置上
4.重新设置该位置的高度为两个图片相加
5.循环2剩余全部图片
代码:
效果:
5.js实现动态加载
动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:
1.什么时候加载?
滑动距离+浏览器高度>最后一张图片距离顶部的距离
2.怎样加载?
通过创建新的节点,把创建的节点添加进去即可
最终代码:
效果:
