嗨~今天用js去写一个经典的案例：“瀑布流”
那么问题来了，什么是瀑布流式布局：“瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。”
话不多说，开始了！
首先还是在html里创建几个盒子，然后再在css里去写一下样式，然后就走到了js里，我们需要在js里写很多数据，然后获取我们需要的数据
getImg()
//获取大盒子
var wrappers = document.querySelector('.wrapper')
// var srt = '';
// 给window一个滑动事件
window.onscroll = function () {
// console.log(isOK())
//判断是否可以加载图片
if (isOK()) {
//循环新数据
for (var i in data.dataimg) {
// console.log(data.dataimg[i])
// 写入html
wrappers.innerHTML += `
\
`\
}\
getImg()\
}\
}\
//封装图片排列顺序\
function getImg() {\
var wrapper = document.querySelector('.wrapper');\
//获取html的宽度\
var html_w = document.documentElement.clientWidth || document.body.clientWidth;\
var boxs = document.querySelectorAll('.box')\
console.log(boxs)\
//获取一个盒子的宽度\
var box_w = boxs[1].offsetWidth;\
console.log(box_w)\
console.log(html_w, box_w)\
//看最多能放几张图片 向下取整\
var cols = Math.floor(html_w / box_w);\
// 重新设置wrapper的宽度\
wrapper.style.width = box_w * cols + 'px';\
var arr = [];\
//循环所有图片\
for (var i = 0; i < boxs.length; i++) {\
\
if (i < cols) { //将第一排的图片的高度取出来\
arr.push(boxs[i].offsetHeight)\
} else {\
var mainH = Math.min.apply(Math, arr) //取第一排高度图片高度的最小值\
var ind = arr.indexOf(mainH) //找到最小值对应的下标\
console.log(mainH)\
// 给后面的图片定位\
boxs[i].style.cssText = `position:absolute;left:${ind * box_w}px;top:${mainH}px`;\
// 时刻更新arr数据，防止都定位到第一个高度最小的图片上面\
arr[ind] += boxs[i].offsetHeight;\
}\
}\
}\
\
\
//封装是否可以加载图片\
function isOK() {\
//html的高度\
var screen_h = document.documentElement.clientHeight || document.body.clientHeight\
//总体的高度\
var top = screen_h + (document.documentElement.scrollTop || document.body.scrollTop);\
var boxs = document.querySelectorAll('.box')\
// console.log(boxs[boxs.length-1].offsetTop); //获取最后一张图片从上面到顶部的距离\
var last_img = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight/2;\
return top > last_img ? true : false; // 判断最后一张图到滚镀区域的距离\
\
\
\
}\
}\
\
看结果把
\
\
\
\
\
