HTML瀑布流布局，有多种实现方式，而能实现数据渲染则需要 js 实现的。
思绪步骤：
- 确定图片的宽度 - 滚动条宽度
- 第一行按序布局
1）将行高push到数组 - 找到数组中最小高度 和 它的索引
- 设置下一行的第一个盒子位置
1）top值就是最小列的高度 - 修改最小列的高度
1）最小列的高度 = 当前自己的高度 + 拼接过来的高度
HTML部分
注意： div高度是个关键问题，需要给死高度
Js部分
备注的步骤对应思绪步骤来书写而出
//瀑布流布局
function waterFall() {
// 1 确定图片的宽度 - 滚动条宽度
var pageWidth = $(".masonry .blog-lists").width();
console.log(pageWidth)
var columns = 3; //3列
var itemWidth = parseInt(pageWidth/columns); //设置item的宽度
$(".masonry .slick-item").width(itemWidth); //设置到item的宽度
var arr = [];
$(".masonry .blog-lists .slick-item").each(function(i){
var height = $(this).height();
if (i < columns) {
// 2 第一行按序布局
$(this).css({
top:0,
left:(itemWidth) * i
});
//将行高push到数组
arr.push(height);
} else {
// 其他行
// 3 找到数组中最小高度 和 它的索引
var minHeight = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (minHeight > arr[j]) {
minHeight = arr[j];
index = j;
}
}
// 4 设置下一行的第一个盒子位置
// top值就是最小列的高度
$(this).css({
top:arr[index]+30,//设置30的距离
left:$(".masonry .blog-lists .slick-item").eq(index).css("left")
});
// 5 修改最小列的高度
// 最小列的高度 = 当前自己的高度 + 拼接过来的高度
arr[index] = arr[index] + height+30;//设置30的距离
}
});
}
//clientWidth 处理兼容性
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
// 页面尺寸改变时实时触发
window.onresize = function() {
//重新定义瀑布流
waterFall();
};
//初始化
$(window).load( function(){
//实现瀑布流
waterFall();
} )
总结：
1.瀑布流难点就是在盒子高度的调节上，因为都是定位排布所以导致高度只能给死
2.使用js写的布局才能进行数据渲染
3.纯粹给自己做笔记，如有前辈想指点一二还请不吝评论。