您的位置：首页 > Web前端 > JavaScript

原生js实现自适应宽度瀑布流以及加载效果——李帅醒博客

2016-11-27 19:11 826 查看

今天教大家使用原生js实现自适应宽度瀑布流以及加载效果，之前已经教过大家左普通瀑布流布局。

1.计算页面的宽度，计算出页面可放数据块的列数（如上图所示就有6列）。

2、一排结束后，如第6个元素，是添加再上一排最短的位置，所以要做一个大小高度判断。

3、当window窗口发生改变时,触发事件，改变列数，用到onresize事件。

4、每次滚动条触发事件，加载新的元素（判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight）。

应用场景：瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。瀑布流的实现方法挺多，但能做到响应式列数变化，自由布局的并不多。如UC新闻页面，百度图片手机页面、蘑菇街。

CSS代码：<style>

*{
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
ul{
position: relative;
margin: 0px auto;
list-style: none;
}
li{
position: absolute;
width: 200px;
padding: 3px;
margin-bottom: 3px;
border-radius: 5px;
transition: all 0.5s;
box-shadow: 10px 10px 10px #666;
}
</style>HTML代码：

<body>
<ul id="wrap"></ul>
</body>

JS代码：

<script type="text/javascript">
var wrap = document.querySelector("#wrap");
//随机高度
function rand() {
return parseInt(Math.random() * 300) + 100;
}
//颜色随机
function randomColor(){
var color = "rgb("
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
color = color+r+","+g+","+b+")";
return color;
}
var num = 0;
//定义一个数组
var colsArr =[];
function getCols() {
var winWidth = document.body.clientWidth;
//得到总列数,因为设pading值，所以不能/200
var cols =Math.floor(winWidth / 206);
for (var i = 0; i < cols; i++) {
colsArr[i] = 0;
}
}
function setPos(ele) {
var minH = colsArr[0];
var minIndex = 0;
for (var i = 0; i < colsArr.length; i++) {
if (minH > colsArr[i]) {
minH = colsArr[i];
minIndex = i;
}
}
ele.style.top = colsArr[minIndex] + "px";
ele.style.left = minIndex * (200 + 10) + "px";
colsArr[minIndex] += ele.offsetHeight + 10;
}
//创建LI方法
function insertLi() {
var li = document.createElement("li");
var liHeight = rand();
li.style.background=randomColor();
li.innerHTML = num;
li.style.height = liHeight + "px";
wrap.appendChild(li);
setPos(li);
}
getCols();
start();
function start() {
for (var i = 0; i < 30; i++) {
num++;
insertLi();
}
}
//当window窗口发生改变时,触发事件，改变列数;
window.onresize = function () {
getCols();
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
setPos(li)
}
}
//触发滚动事件，继续创建
window.onscroll=function(){
// html总高度-可视化窗口高度=body的滚动高度,所以当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的ul
//兼容新写法
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
if(document.documentElement.offsetHeight-clientHeight<=scrollTop){
start();
}
}
</script>

友情推荐：

原生js实现瀑布流以及加载效果——李帅醒博客

（我吃酸萝卜新浪微博http://www.weibo.com/wcslb
---李帅醒著）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 自适应李帅醒瀑布流 javascript

相关文章推荐

新的分享

章节导航