В этой статье используется чистый код JS для написания эффекта веб -страницы потока водопада, первоначально реализуя базовый макет потока водопада, и моделировать загрузку данных AJAX, загружающую новую функцию изображения после прокрутки внизу.
недостаток:
1. Программа не является отзывчивой и не может регулировать ширину страницы в режиме реального времени;
2. Когда в программе добавляются изображения данных моделирования AJAX, все изображения на всей странице решаются один раз.
3. Программа ждет загрузки всех изображений, прежде чем читать размер изображения. На самом деле, это определенно невозможно.
4. В реальных проектах фоновая программа должна дать значение размера изображения и напрямую использовать атрибут ширины изображения в коде JS.
Идеи для этой программы:
Структура HTML:
<body> <div id = "container"> <div> <viv> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> </div> ... </div> </body>
1. Инициализируйте макет
1. Установите #Container на положение: относительно;
2. set .box to float: слева;
3. Положение всех изображений после загрузки веб -страницы;
3.1 Ширина изображения фиксирована. Рассчитайте количество изображений, которые могут быть размещены по каждой строке текущей страницы, и получить ширину #Container, а затем установить страницу в центр;
3.2 Перевернуть все изображения, макет по умолчанию первых изображений Num - это первая ряд, а массив BoxHeightArr = [];
3.3 После завершения первой линии макет, расположить следующее изображение и обновить BoxHeightArr []:
3.3.1 Поместите следующее изображение под кратчайшим изображением в первой строке (положение: абсолютное), то есть столбец с наименьшей высотой в BoxHeightArr [] и запишите значение индекса следующих чисел: minindex;
3.3.2 Обновить наименьшее значение в BoxHeightArr [] (BoxHeightArr [minindex]+текущая высота изображения);
3.4 Повторите шаги цикла 3.3, пока не будут установлены все изображения
2. Мониторинг высоты прокрутки в реальном времени, независимо от того, должны ли быть загружены новые данные
1. После завершения инициализации получите высоту последнего изображения сверху: LastContentHEITH
2. Использовать window.onscroll = function () {...}
Мониторинг высоты прокрутки в текущей странице в реальном времени: Scrolltop
Мониторинг текущей высоты окна текущей страницы в режиме реального времени: PageHeight
3. Когда страница контролирует: LastContentHEight <Scrolltop + PageHeight, используйте Ajax для получения данных JSON недавно добавленного изображения.
3. Добавьте новый контент внизу страницы
1. Используйте цикл, чтобы сначала создать новый контейнер с изображения, добавьте его в нижнюю часть, а затем напишите соответствующие данные изображения, такие как пути в данных JSON, в контейнер, чтобы завершить добавление изображения.
2. После того, как все новые изображения добавляются, повторно рассредоточьте операцию инициализации шага 1 для всех изображений и макетов всей страницы.
Папка проекта:
index.html: предварительная часть данных изображения
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/app.js"></script> <title>JavaScript Waterfall Flow</title> </head> <body> <div id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img = "img/3.jpg"/> </div> </div> <img = "img/3.jpg"/> </div> </div> </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "/> </> </div> </div> <div> <img src ="/> </> </div> </div> <div> <img src = " </div> </div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src/jpg "/> </div> </div> <div> <img src/jpg"/> </div> </div> <div> <img/j </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <viv> <img src = "img/10. src = "img/1.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> <div> <img src = "img/3.jpg"/> </div> </div> <img src = " src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "Img/6. src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6. src = "img/6.jpg"/> </div> </div> </div> <div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img = "Img/jpg"/> </div> </div> <div> <img = ". <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/10.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img = "img/1.jpg"/> </div> </div> <div> <img = "/1. <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <img = "img/4. <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img = "Img/jpg"/> </div> </div> <div> <img = "7. <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img = "/9. <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/10.jpg"/> </div> </div> </div> </hods> </html>
style.css:
*{маржа: 0; PADDING: 0;}#Container {Position: Relival;}. Box {Padding: 5px; float: left;}. Box_img {padding: 5px; Граница: 1PX SOLID #CCC; Box-Shadow: 0 0 5px #CCC; Border-Radius: 5px;}. Box_img img {width: 150px; Высота: Авто;}app.js:
window.onload = function () {imglocation ("intainer", "box"); // Ajax смоделировали данные var imgdata = {"data": [{"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, {"src": "6.jpg"}, {"src": "8.jp g "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 4.jpg "}, {" src ":" 5.jpg "}, {" src ":" 6.jpg "}, {" src ":" 8. window.onscroll = function () {if (checkflag ()) {// судить о том, должны ли новые данные загружены внизу var cparent = document.getElementbyid ("intainer"); // загружать данные ajax в страницу для (var i = 0; i <imgdata.data.length; i ++) {var ccontent = document.createElement ("div"); ccontent.classname = "box"; cparent.appendchild (ccontent); var boximg = document.createElement ("div"); boximg.classname = "box_img"; ccontent.appendchild (boximg); var img = document.createElement ("img"); img.src = "img/"+imgdata.data [i] .src; boximg.appendchild (IMG); } // Перемесить все данные изображения после Imglocation («Контейнер», «Box»); }}}; function checkflag () {var cparent = document.getElementById ("Контейнер"); var ccontent = getChildElement (cparent, "box"); // Получить высоту последнего изображения сверху, высота прокрутки, высота окна var lastContentHeight = ccontent [ccontent.length-1] .OffSetTop; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var pageHeight = document.documentelement.clientHeight || document.body.clientHeight; console.log (lastcontentheight+":"+scrolltop+":"+pageheight); if (lastcontentheight <scrolltop + pageheight) {return true; }} function imglocation (parent, content) {// Принять все содержимое при родителе из var cparent = document.getelementbyid (parent); var ccontent = getChildElement (cparent, Content); // Корретирование количества изображений на строку в соответствии с шириной текущего окна браузера и исправить его, Center var Imgwidth = ccontent [0] .OffSetWidth; // offsetWidth = width + padding + border var num = math.floor (document.documentelement.clientwidth /imgwidth); cparent.style.csstext = "width:"+imgwidth*num+"px; margin: 0 auto"; // оповещение ("пауза"); // Установить массив для размещения информации о изображении первой строки var boxHeightarr = []; for (var i = 0; i <ccontent.length; i ++) {if (i <num) {// Записать высоту изображения в первой строке BoxHeightArr [i] = ccontent [i] .OffsetHeight; // Когда данные AJAX загружаются, программа перемещает все картинки, поэтому изображение в первой строке должна быть очищена Положение: Absolute Ccontent [i] .style.position = "static"; } else {var minHeight = math.min.apply (null, boxheightarr); var minindex = getminheightlocation (BoxHeightArr, Minheight); // Поместите изображение ниже наименьшего значения индекса первой строки ccontent [i] .style.position = "Absolute"; ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; // После размещения изображения обновите «минимальную высоту первой строки информации о изображении», // затем используйте цикл для повторяемого действия, чтобы повторить это действие до конца BoxHeightArr [minindex] = boxHeightarr [minindex] + ccontent [i] .offsetheight; }};} // Получить значение индекса с наименьшей высотой первой строки изображения getMinheightlocation (boxHeightarr, minheight) {for (var i in boxheightarr) {if (boxheightarr [i] == minheight) {return i; }}} // Получить All BoxFunction getChildElement (parent, content) {contentArr = parent.getElementsbyclassname (content); вернуть ContentArr;}Изображение воспроизведения:
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.