93JS原生：瀑布流图片
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了93JS原生：瀑布流图片相关的知识，希望对你有一定的参考价值。
所谓瀑布流图片，就是随着鼠标往下拉，图片无穷无尽，但又不是死循环。因为这次拉到底后，后面的才显示出来。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*
margin:0;
padding:0;
list-style: none;
font-size: 50px;
color: white;
div
width: 1050px;
margin:0 auto;
div ul
width: 200px;
float: left;
margin: 0 5px;
div ul li
width: 100%;
background: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5c2ddf7c938c5a6ae54f0b1ab390b9fe") no-repeat center #e1e1e1;
margin-bottom: 10px;
div ul li img
display: block;
width: 100%;
</style>
</head>
<body>
<div>
<ul><!--<li><img realImg="1.jpg" /></li>--></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script>
var oDiv=document.getElementsByTagName(‘div‘)[0];
var aUl=oDiv.getElementsByTagName(‘ul‘);
var aLi=oDiv.getElementsByTagName(‘li‘);
var aImg=oDiv.getElementsByTagName(‘img‘);
//此处是自己造的假数据
var data=[
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517855671_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517857750_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517860171_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518058703_mthumb.jpg",
"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518060703_mthumb.jpg"
];
function rnd(n,m)
return Math.round(Math.random()*(m-n)+n);
function makeArray(arg)
var ary=[];
if(‘getComputedStyle‘ in window)
ary=Array.prototype.slice.call(arg);
else
for(var i=0; i<arg.length; i++)
ary.push(arg[i])
return ary;
function win(attr)
return document.documentElement[attr]||document.body[attr];
//1.动态创建1个li,li的宽度不管，高度随机，内容是img；
function createLi()
var oLi=document.createElement(‘li‘);
oLi.style.height=rnd(100,300)+‘px‘;
oLi.innerHTML=‘<img realImg="‘+data[rnd(0,9)].src+‘" />‘;
return oLi;
//2.创建50个li，每次都插入最短的ul
function li50()
for(var i=0; i<50; i++)
var oLi=createLi();
var ary=makeArray(aUl);
ary.sort(function(a,b)
return a.offsetHeight- b.offsetHeight;
);
ary[0].appendChild(oLi);
li50();
showImg();
window.onscroll=function()
var scrollBottom=win(‘scrollTop‘)+win(‘clientHeight‘);
showImg();//延迟加载图片，只要图片进入可视区，才显示图片
if(scrollBottom>=win("scrollHeight"))
li50();//不管是否进入可视区，只要满足条件，都会动态创建50个；
;
function showImg()
var scrollBottom=win(‘scrollTop‘)+win(‘clientHeight‘);
for(var i=0; i<aLi.length; i++)
var imgPos=aLi[i].offsetTop+aLi[i].offsetHeight;
if(imgPos<scrollBottom)
aImg[i].src=aImg[i].getAttribute(‘realImg‘);
aImg[i].parentNode.style.height=‘auto‘;
</script>
</body>
</html>
```
以上是关于93JS原生：瀑布流图片的主要内容，如果未能解决你的问题，请参考以下文章
原生JavaScript实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]