瀑布流布局的特点:
【1】展示的图片元素都是等宽不等高,图片的位置用position:absolute定位来摆放。
【2】一行能摆放多少图片的数量=获取当前窗口宽度/图片固定宽度。注意:获取元素宽度是不要使用.width(),这种方法获取的是div元素的content宽度。使用$('.item').outerWidth(true) //获取元素的整个宽度(内容宽度+内边距+边框+外边距)
【3】图片的摆放位置遵循规律:下一张图片始终摆放在页面中图片高度之和最小的那一列下面,图片位置水平方向=图片数组索引号*图片固定宽度,垂直方向位置=图片数组索引号对应的值(即当前列的图片高度之和)。图片摆放后更新当前列的所有图片总高度。
注意:该步骤可理解为,给定一个数组,在该数组中找出成员最小值和该成员在数组中的索引号。首先假定数组中某个值为最小值,然后用for循环遍历数组中的所有成员和假定最小值比较,如果某数组成员的值小于假定值,则获取将该值(colSumHeight[i])和对应的索引号(i)。
【4】设置初始状态数组,数组长度等于当前一行能摆放的图片数,该数据记录每行中每张图片的高度,数组的索引号记录图片在每行上第几列的位置。每张图片摆放后,修改数组内对应索引号成员的值(即当前列的高度之和)
预览地址
代码地址