<强>一、瀑布流是个啥?
瀑布流,是比较流行的一种网站页面布的局,视觉表现为参差不齐的多栏布的局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在“很久”以前,百度图片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便。
<强>二、瀑布流的优缺点
1,节省了页面的空间,不再需要导航和页码按钮。
2,增强了用户的体验,使用户的体验更多的是在于浏览图片上,而不是在寻找怎么找下一页和切换的操作上。
1。使用的网页类型有限:
这种瀑布流布局只适用于某些特定类型产品中一部分特定类型的内容。
比如我们在某宝买东西时,我们就需要记住第几页的哪个商品是我们想买的,然后再回头购买,这时候就需要我们的页面按钮来帮忙记忆,瀑布流反而更加麻烦。
2。永远看不到的页脚:
如果我们使用瀑布流无限滚动加载模式,那就是说我们永远也无法看到我们的页脚,当用户一次次的浏览到页面底部,看到页脚,却因为自动加载的内容的突然出现,无论怎样都无法点击到页脚中的链接或登录时,那么用户的体验是极为糟糕的,他们可能会愤怒的关掉你的网页。
3。关于页面数量:
对于用户来说,使用瀑布流自动加载来替代传统的换页其实是很方便的,而对于开发者的网站来说,页面的减少可能就无法展示更多地相关信息,最明显的就是广告减少。
<强>三、瀑布流写法及原理
瀑布流到底长什么样子呢,那我们现在就来默写一个简单的瀑布流布局。先把乱七八糟的基础样式和布局稍微的敲一下~这里我们为了节省空间,就不缩进啦~
CSS:
*{保证金:0;填充:0;}
#包装{宽度:840 px;保证金:0汽车;边界:1 px固体黑色;溢出:隐藏;}
#包装ul{宽度:200 px;保证金:0 5 px;浮动:左;}
李#包装ul{宽度:200 px; list-style:没有,保证金:10 px 0;背景:苍绿色,字体大小:50 px;颜色:白色;text-align:中心;}
HTML:
祝辞& lt; div id=" wrap ";
& lt; ul> & lt;/ul>
& lt; ul> & lt;/ul>
& lt; ul> & lt;/ul>
& lt; ul> & lt;/ul>
& lt;/div>
之前
以下是简单的JS代码:
var包=document.querySelector(“#包装”);
var ul=文档。querySelectorAll(" #包装ul ");//声明元素块//先创建一个随机数的函数
函数随机(最小,最大){
返回math . random() *(极大极小+ 1)+分钟;
}//再创建一个添加李的函数
函数createLi (num) {
我(var=0; i< num;我+ +){
var newLi=document.createElement("李");//创建
newLi.style.height=随机(100400)+“px”;//使用随机数函数创建高度不同的
var arrul=[];//将ul的高度进行储存和比较
(var j=0; j< ul.length; j + +) {
arrul.push (ul [j] .offsetHeight);//储存ul的高度
}
var minHeight=arrul [0];
var minIndex=0;
(var k=0; k< arrul.length; k + +) {
如果(minHeight> arrul [k]) {
minHeight=arrul [k];//比较出高度最短的ul然后赋值给minHeight
minIndex=k;//把高度最短的ul所在下标赋值给minIndex
}
}
ul (minIndex) .appendChild (newLi);//向高度最短的ul里添加
}
}
createLi(15);//执行函数,添加15个,//创建一个滚动事件
window.onscroll=function () {//html总高度——可视化窗口高度=身体的滚动高度//兼容写法
var scrollTop=document.body.scrollTop;
var clientHeight=document.documentElement.clientHeight | | document.body.clientHeight | | window.innerHeight;
如果(document.documentElement.offsetHeight-clientHeight<=scrollTop) {
createLi (15);
}
}//当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的李
之前
这样我们就实现了永远也看不到页脚的自动加载瀑布流布局。
<强>四,总结
瀑布流简单来讲就是页面容器内的多个高度不固定的容器之间参差不齐的添加内容,鼠标滚动时不断在容器内的尾部加载数据,且自动加载到空缺位置,也就是例子中的高度最短的位置,不断循环。
