瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。 瀑布流布局效果 即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 那么规则是什么呢？ 下面通过图解来分析一下瀑布流的算法。 图解瀑布流算法 当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。 那么第六张图片，放置在什么位置呢？是下图的位置么？ 我们通过瀑布流算法实验得到，后面紧跟的第六张图片的位置应该是这个位置。 为什么呢？ 因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。 所以我们知道了，如果再继续放置下去，第七张图片应该是这个位置，对吗？ 通过瀑布流算法实验得出位置正确。看懂这个图示应该就能理解了瀑布流的原理算法。 JS 实现代码 这里使用了jQuery View Code Demo 演示 瀑布流 Demo 效果 总结瀑布流布局原理 设置图片宽度一致 根据浏览器宽度以及每列宽度计算出列表个数，列表默认0 当图片加载完成，所有图片依次放置在最小的列数下面 父容器高度取列表数组的最大值 实战相关 瀑布流 + 懒加载 实现新闻站 https://github.com/evenyao/waterfall-sinanews 作者：evenyao 出处：http://www.cnblogs.com/evenyao/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。 分类: CSS,HTML,JavaScript,jQuery,前端 好文要顶 关注我 收藏该文 evenyao 关注 - 5 粉丝 - 4 +加关注 0 0 « 上一篇：懒加载 posted @ 2018-08-23 13:29 evenyao 阅读(289) 评论(0) 编辑 收藏 https://www.cnblogs.com/evenyao/p/9523226.html