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