The so-called waterfall picture, is pulled down with the mouse, endless pictures, but not an infinite loop. Because of this pull in the end, the show up behind.
`` `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: Auto 0;
}
div UL {
width: 200px;
a float: left;
margin: 0 5px;
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.E / 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];
}
// Create a dynamically 1 li, li regardless of the width, height random, content IMG;
function createLi () {
var Oli = document.createElement ( 'Li');
oLi.style.height = RND (100,300) + 'PX';
oLi.innerHTML = '<IMG realImg = "'. + Data [RND (0,9)] + the src '" Alt = "" />';
return Oli;
}
. 2 // Create 50 li, inserting each time the shortest UL
function LI50 () {
for (var I = 0; I <50; I ++) {
var createLi Oli = ();
var = makeArray ary (AUL);
ary.sort (function (a, B ) {
return a.offsetHeight- b.offsetHeight;
});
ary [0] .appendChild (Oli);
}
}
LI50 ();
ShowImg ();
= function window.onscroll () {
var scrollBottom win = ( 'scrollTop') + win ( 'the clientHeight');
ShowImg (); // Load picture delay, as long as the image into the visible region, only the display image
if (scrollBottom> = win ( "the scrollHeight")) {
LI50 (); // whether or not to enter the visible region, as long as conditions are created dynamically 50;
}
};
function ShowImg () {
var scrollBottom win = ( 'scrollTop') + win ( 'the clientHeight');
for (var I = 0; I <aLi.length; I ++) {
var imgPos aLi = [I] + .offsetTop aLi [I] .offsetHeight;
IF (imgPos <scrollBottom) {
AIMG [I] = AIMG .src [I] .getAttribute ( 'realImg');
AIMG [I] = .parentNode.style.height 'Auto';
}
}
}
</script>
</body>
</html>
```
93JS native: waterfall pictures
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10967172.html
Ranking