HTML waterfall layout, There are many ways to implement it, and data rendering needs to be implemented by js.
Thought steps:
- Determine the width of the picture-scroll bar width
- The first row is laid out in order
1) Push the row height to the array - Find the minimum height and its index in the array
- Set the first box position of the next row
1) The top value is the height of the smallest column - Modify the height of the smallest column
1) The height of the smallest column = the current height + the height of the stitching
HTML part
note: The height of the div is a key issue, you need to give the dead height
Js part
The steps of the remarks correspond to the steps of the thoughts.
//瀑布流布局
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();
} )
to sum up:
1. The difficulty of the waterfall flow is the adjustment of the height of the box, because it is all positioning and arrangement, the height can only be dead
2. Use the layout written in js to perform data rendering
3. Purely take notes for yourself, if you have seniors who want to give pointers Please feel free to comment.