JavaScript realizes the waterfall flow loading effect _javascript technique of imitating Baidu picture

Because there is no server, a JSON string is used to load the source of the picture data as a drop down

Html:

<! DOCTYPE html>  

Jswallper.js:

Window.onload=function () {Waterfall (' main ', ' pin ');
 
 var dataint={' data ': [{' src ': ' 1.jpg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.jpg '}]}; Window.onscroll=function () {if (Checkscrollside ()) {var oparent = document.getElementById (' main ');//Parent object for (Var i     =0;i<dataint.data.length;i++) {var opin=document.createelement (' div ');//Add element node Opin.classname= ' pin ';    Add Class Name Property Oparent.appendchild (Opin);
    Add child node var obox=document.createelement (' div ');
    obox.classname= ' box ';
    Opin.appendchild (Obox);
    var oimg=document.createelement (' img ');
    Oimg.src= './images/' +dataint.data[i].src;
   Obox.appendchild (OIMG);
  } waterfall (' main ', ' pin ');
 }; }/* Parend parent ID pin Element ID/function waterfall (parent,pin) {var oparent=document.getelementbyid (parent);//Parent Object V Ar apin=getclassobj (oparent,pin)//Get the array that stores the pin of the block box apin var ipinw=apin[0].offsetwidth;//the width var num=math.floor of a block pin ( DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/IPINW);//number of pins that can be accommodated in each line "Window width divided by the width of a block box "oparent.style.csstext= ' width: ' +ipinw*num+ ' px;margin:0 auto; '; /Set Parent Center style: Fixed width + automatic horizontal outer margin var pinharr=[];//is used to store the height of the addition of all the block boxes in each column.
  A for (Var i=0;i<apin.length;i++) {//traversal array apin each block box element var Pinh=apin[i].offsetheight; if (i<num) {pinharr[i]=pinh;//num block pin in first line added first to array Pinharr}else{var minh=math.min.apply (Null,pinharr);//Array Pin
   The minimum value in Harr minH var minhindex=getminhindex (Pinharr,minh);
   apin[i].style.position= ' absolute '//Set Absolute displacement apin[i].style.top=minh+ ' px ';
   apin[i].style.left=apin[minhindex].offsetleft+ ' px '; High + + add apin[i] block box High pinharr[minhindex]+=apin[i].offsetheight;//Update add block Box Liegau}}}/* * by Parent and child element class classes Take the array of the same child element */function Getclassobj (parent,classname) {var obj=parent.getelementsbytagname (' * ');//Get all subsets of the parent Var pins=[ ];//creates an array to collect the child elements for (Var i=0;i<obj.length;i++) {//Traversal child elements, the judgment category, the pressed array if (obj[i].classname==classname) {Pins.push (
  Obj[i]);
 }
 };
return PinS; /**** * Gets the index of the minimum pin height/function Getminhindex (arr, MinH) {for (var i-arr) {if (Arr[i]==minh) {return i;
 }} function Checkscrollside () {var Oparent=document.getelementbyid (' main ');
 var apin=getclassobj (oparent, ' pin '); var lastpinh=apin[apin.length-1].offsettop+math.floor (APIN[APIN.LENGTH-1].OFFSETHEIGHT/2);//create " Trigger the height of the Add block function waterfall (): The last block box is the distance from the top of the page + its own high half (implementation does not roll to start loading) var scrolltop=document.documentelement.scrolltop| | document.body.scrolltop;//Note Resolve compatibility var documenth=document.documentelement.clientheight;//page height return (lastPinH<
 scrolltop+documenth)? true:false;//returns True when the specified height is reached, triggering the waterfall () function}

Demo diagram:

SOURCE Download: http://www.jb51.net/jiaoben/452663.html

Demo Address: http://demo.jb51.net/js/2016/JSWallper/