瀑布流又称瀑布流式布局，是比拟风行的一种网站页面布局形式。视觉体现为参差不齐的多栏布局，最早采纳此布局的是网站是 Pinterest，后逐步在国内风行。
瀑布流布局成果
即多行等宽元素排列，前面的元素顺次增加到其后，等宽不等高，依据图片原比例缩放直至宽度达到咱们的要求，顺次依照规定放入指定地位。
那么规定是什么呢？
上面通过图解来剖析一下瀑布流的算法。
图解瀑布流算法
当第一排排满足够多的等宽图片时（如下图状况），自然而然的思考到之后搁置的图片会往下面排放。
那么第六张图片，搁置在什么地位呢？是下图的地位么？
咱们通过瀑布流算法试验失去，前面紧跟的第六张图片的地位应该是这个地位。
为什么呢？
因为搁置它之前，这一列的高度为所有列中最小，所以会搁置在这个中央。
所以咱们晓得了，如果再持续搁置上来，第七张图片应该是这个地位，对吗？
通过瀑布流算法试验得出地位正确。看懂这个图示应该就能了解了瀑布流的原理算法。
JS 实现代码
这里应用了jQuery
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><script> var colCount //定义列数 var colHeightArry= [] //定义列高度数组 var imgWidth = $('.waterfall img').outerWidth(true) //单张图片的宽度 colCount = parseInt($('.waterfall').width()/imgWidth) //计算出列数 for(var i = 0 ; i < colCount; i ++){ colHeightArry[i] = 0 } //[0,0,0] $('.waterfall img').on('load',function(){ var minValue = colHeightArry[0] //定义最小的高度 var minIndex = 0 //定义最小高度的下标 for(var i = 0 ; i < colCount; i ++){ if(colHeightArry[i] < minValue){ //如果最小高度组数中的值小于最小值 minValue = colHeightArry[i] //那么认为最小高度数组中的值是真正的最小值 minIndex = i //最小下标为以后下标 } } $(this).css({ left: minIndex * imgWidth, top: minValue }) colHeightArry[minIndex] += $(this).outerHeight(true) }) //当窗口大小重置之后，从新执行 $(window).on('resize',function(){ reset() }) //当窗口加载结束，执行瀑布流 $(window).on('load',function(){ reset() }) //定义reset函数 function reset(){ var colHeightArry= [] colCount = parseInt($('.waterfall').width()/imgWidth) for(var i = 0 ; i < colCount; i ++){ colHeightArry[i] = 0 } $('.waterfall img').each(function(){ var minValue = colHeightArry[0] var minIndex = 0 for(var i = 0 ; i < colCount; i ++){ if(colHeightArry[i] < minValue){ minValue = colHeightArry[i] minIndex = i } } $(this).css({ left: minIndex * imgWidth, top: minValue }) colHeightArry[minIndex] += $(this).outerHeight(true) }) }</script>Demo 演示
瀑布流 Demo 成果
总结瀑布流布局原理
设置图片宽度统一
- 依据浏览器宽度以及每列宽度计算出列表个数，列表默认0
- 当图片加载实现，所有图片顺次搁置在最小的列数上面
- 父容器高度取列表数组的最大值
援用链接
https://www.jianshu.com/p/cea...