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

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

2016-11-21 23:16 766 查看

今天教大家使用原生js实现瀑布流以及加载效果，下回再教大家使用使用原生JS实现响应式瀑布流布局，还是先从简单的入手！

1、首先列数是固定的，不同的是高度，随机产生。

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

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

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

CSS页面：*{
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
body{
margin: 0px auto;
width: 1100px;
}
ul{
margin-top: 10px;
list-style: none;
width: 200px;
padding: 3px 3px 0px 3px;
float: left;
margin-left: 5px;
}
li{
width: 190px;
background: yellow;
padding: 3px;
margin-bottom: 3px;
border-radius: 5px;
box-shadow: 10px 10px 10px #666;
}
</style>HTML页面：

<body>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</body>

SJ页面代码：

<script type="text/javascript">
uls=document.querySelectorAll("ul");
var num=1;
function statr(){
for(var i=0;i<30;i++){
//把4个ul的高度放到一个数组中
var ArrHeight=[uls[0].offsetHeight,uls[1].offsetHeight,uls[2].offsetHeight,uls[3].offsetHeight,uls[4].offsetHeight];
var index=mini(ArrHeight);
CreateLi(uls[index],num++);
}
}
statr();
//触发滚动事件，继续创建
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){
statr();
}
}
//创建li
function CreateLi(ul,num){
var li=document.createElement("li");
li.style.height=rand()+"px";
li.innerHTML=num;
li.style.background=randomColor();
ul.appendChild(li);
}
//获取最小高度
function mini(arr){
var miniHeight=arr[0];
for(var i=0;i<arr.length;i++){
if(arr[i]<miniHeight){
miniHeight=arr[i];
}
}
//每次返回的都是最短ul的下标
return arr.indexOf(miniHeight);
}
//随机高度
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;
}
</script>

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

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

标签： 李帅醒原生js 瀑布流

相关文章推荐

新的分享

章节导航