Home > Developer > JavaScript
Javascript achieves waterfall stream loading effect like Baidu images, and javascript Baidu Images
Since there is no server, a json string is used as the source for loading image data during the 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 an element node oPin. className = 'pin'; // Add the class name attribute oParent. appendChild (oPin); // Add Add the subnode 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 var aPin = getClassObj (oParent, pin); // obtain the array aPin var iP of the pin in the bucket box InW = aPin [0]. offsetWidth; // The width var num1_math.floor(document.doc umentElement. clientWidth/iPinW); // Number of pins that can be accommodated in each row [window width divided by the width of a block] oParent.style.css Text = 'width: '+ iPinW * num + 'px; margin: 0 auto; '; // set the parent center style: fixed width + automatic horizontal margin var pinHArr = []; // used to store the height of all block boxes in each column. A for (var I = 0; I <aPin. length; I ++) {// traverses each block box element var pinH = aPin [I] of the array aPin. offsetHeight; if (I <num) {pinHArr [I] = pinH; // Add the num block box pin in the first line to the array pinHArr} else {var minH = Math. min. apply (null, pinHArr); // the minimum value of minH var minHIndex = getminHIndex (pinHArr, minH) in the array pinHArr; aPin [I]. style. position = 'absolute '; // sets the absolute displacement aPin [I]. style. top = minH + 'px '; aPin [I]. style. left = aPin [minHIndex]. offsetLeft + 'px '; // The height of the minimum array height element + the added aPin [I] block box High pinHArr [minHIndex] + = aPin [I]. offsetHeight; // update the column height after the block box}/** use the class of the parent and Child elements to obtain the array of the child elements of the same type */function getClassObj (parent, className) {var obj = parent. getElementsByTagName ('*'); // obtain all subsets of the parent Level var pinS = []; // create an array to collect sub-elements for (var I = 0; I <obj. length; I ++) {// traverse sub-elements, determine the category, and press in the array if (obj [I]. className = className) {pinS. push (obj [I]) ;}}; return pinS ;}/ ***** retrieve the index of the minimum pin height */function getminHIndex (arr, minH) {For (var I in 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 the height of the waterfall () function that triggers the Add block box function: the last block frame is half the distance from the top of the page + the height of the page (loading starts when the page is not rolled to the end) var scrollTop=document.doc umentElement. scrollTop | document. body. scrollTop; // pay attention to compatibility Var incluenth?document.doc umentElement. clientHeight; // return page height (lastPinH <scrollTop + incluenth )? True: false; // return true when the specified height is reached, triggering the waterfall () function}Demo diagram:
Source code download: http://www.bkjia.com/jiaoben/452663.html
Demo address: http://demo.jb51.net/js/2016/JSWallper/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
