Поскольку сервера нет, я использую строку JSON в качестве источника загрузки данных изображения при стягивании
HTML:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "js/waterfall.js"> </script> <стиль тип = "text/css"> *{adding: 0; } .pin {padding: 15px 0 0 15px; Плавание: осталось; } .box {padding: 10px; Граница: 1PX SOLID #CCC; Box-Shadow: 0 0 6px #CCC; граница радий: 5px; } .box img {width: 162px; Высота: Авто; } </style> </head> <body> <div id = "main"> <div> <div> <img src = "./ Images/1.jpg"/> </div> </div> <div> <img src = "./ Images/2.jpg"/> </div> </div> <div> <img src = ". <img src = "./ Images/4.jpg"/> </div> </div> <div> <img src = "./ Images/4.jpg"/> </div> </div> <div> <img src = "./ Images/5.jpg"/> </div> </div> <div> <img src = ". <div> <img src = "./ Images/7.jpg"/> </div> </div> <div> <img src = "./ Images/8.jpg"/> </div> </div> <div> <img src = "./ Images/9.jpg"/> </div> </div> <div> <img src = ". </div> <div> <img src = "./ Images/10.jpg"/> </div> </div> <div> <img src = "./ Images/10.jpg"/> </div> </div> <div> <img src = "./ Images/10.jpg"/> <//div> </div> <div> <img src = ". </div> </div> <div> <img src = "./ Images/10.jpg"/> </div> </div> <div> <img src = "./ Images/11.jpg"/> </div> </div> <div> <img src = "./ Images/12.jpg"/> </div> </div> <img src = ". src = "./ Images/12.jpg"/> </div> </div> <div> <img src = "./ Images/13.jpg"/> </div> </div> <div> <img src = "./ Images/14.jpg"/> </div> </div> <div> <img src = ". <div> <img src = "./ Images/16.jpg"/> </div> </div> <div> <img src = ". </div> </div> <div> <img Src = ". src = "./ Images/18.jpg"/> </div> </div> <div> <img src = "./ Images/19.jpg"/> </div> </div> <div> <img src = "./ Images/20.jpg"/> </div> </div> <Div> <Img src = ". </div> </div> </body> </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'); // родительский объект для (var i = 0; i <dataint.data.length; i ++) {var inment = document.createElement ('div'); // Добавить элемент узел inment.classname = 'pin'; // Добавить атрибут имени класса oparent.appendchild (Mind); // Добавить дочерний узел var obox = document.createElement ('div'); obox.classname = 'box'; Mind.AppendChild (obox); var oimg = document.createElement ('img'); oimg.src = './images/'+dataint.data [i] .src; obox.appendchild (oimg); } waterfall ('main', 'pin'); }; }}/** Идентификатор элемента Pin Pin Pin Pin Pinat Pin*/Функция Waterfall (Parent, Pin) {var oparent = document.getElementById (родитель); // родительский объект var apin = getClassObj (oparent, pin); // Получить массив штифта блока хранения apin var ipinw = apin [0] .OffsetWidth; // Широкий вар. num = math.floor (document.documentelement.clientwidth/ipinw); // Количество штифтов, которые могут быть размещены в каждой строке [ширина окна, разделенная на одну ширину блока] oparent.style.csstext = 'width:'+ipinw*num+'px; Полевая: 0 Auto; '; // Установить стиль ориентировки родительского центра: фиксированная ширина + автоматическая горизонтальная края var pinharr = []; // используется для хранения высот всех блочных коробок в каждом столбце. a for (var i = 0; i <apin.length; i ++) {// Передача каждого элемента блок -бокса Apin apin var pinh = apin [i] .offsetheight; if (i <num) {pinharr [i] = pinh; // штифт блока Num в первой строке добавляется в массив Pinharr} else {var minh = math.min.apply (null, pinharr); // Минимальное значение в массиве Pinharr minh var minhindex = getminhindex (pinharr, minh); apin [i] .style.position = 'Absolute'; // Установить абсолютный апин смещения [i] .style.top = minh+'px'; apin [i] .style.left = apin [minhindex] .offsetleft+'px'; // Высота минимального высокого элемента массива + добавить Apin [i] Блок -бокс высота pinharr [minhindex] + = apin [i] .offsetheight; // Обновление высоты столбца после добавления блока}}}/* obj = parent.getelementsbytagname ('*'); // Получить все подмножества родительских pins = []; // Создать массив для сбора детских элементов для (var i = 0; i <obj.length; i ++) {// transf elements, судите к категории и нажмите в массив, если (obj]. PINS.Push (obj [i]); }}; вернуть контакты;}/*****Получить индекс индекса минимальной высоты штифта*/function getMinhindex (arr, minh) {for (var i in arr) {if (arr [i] == minh) {return i; }}} function ceckscrollside () {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); // Создать высоту [запуска функции блока-коробки Waterfall ()]: последняя блочная коробка-с верхней части веб-страницы + половина его высоты (реализация без запуска до конца) scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // Возврат высоты бумаги (lastpinh <scrolltop+documenth)? True: false; // Возврат true после достижения указанной высоты, запуская функцию Waterfall ()}}}}}}}}}}}}}Демо -диаграмма:
Скачать исходный код: //www.vevb.com/jiaoben/452663.html
Демо -адрес: http://demo.vevb.com/js/2016/jswallper/