Позвольте мне сначала показать вам визуализации:
При скольжении по веб -странице изображение может быть автоматически загружено и отображено.
Модель коробки, которая содержит изображения, выглядит следующим образом:
<div> <div> <img src = "img/8.jpg"> </div> </div>
Установите IMG-Width на 150px, затем Box_img добавляет внутреннюю краю и эффекты тени, внешний край Box-0, добавьте внутренний край. Ширина коробки растягивается по ширине IMG и поля. Другими словами, между коробками нет расстояния, но внутри коробки есть некоторые поля. Таким образом, при установлении позиции JS вам не нужно рассматривать проблему по марже, просто вызовите ширину коробки.
Установите позицию Div, который содержит все поле для относительного, поэтому при установлении верхнего значения или левого значения вам не нужно учитывать самый внешний атрибут маржи.
Поместите изображение: получите высоту первого ряда изображения и храните его в массиве. Установите положение в абсолютном на следующем рисунке, поместите ее под изображением с наименьшей высотой, затем установите вверху и влево и добавьте минимальное значение массива на высоту недавно расположенного изображения. Другими словами, за исключением первой строки, оригинальные изображения, размещенные в HTML, перемещены в JS.
При скольжении страницы вниз запускается функция события, а затем размещены некоторые изображения, чтобы обеспечить бесконечную загрузку изображений.
HTML -файл:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <title> </title> <link rel = "stylesship" href = waterfall.css "type =" text/css "> <script src =" waterfall.js "> </script> </div> <dobe> id = "content"> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = ". src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = ". src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <viv> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = ". src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = ". src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg "> </div> <div> <div> <img src =" img/.jpg "> </div> <div> <img src =" img/. src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = ". src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = ". src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img = " src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <iv> <img src = ". src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/. src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = ". src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <iv> <iv> <img src = ". src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = ". src = "img/.jpg"> </div> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg "> </div> <div> <img/. src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img = " src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = ".
Файл CSS:
*{margin :; padding:;} #content {position: относительно; фоновый цвет: #;}. Box {padding: px; float: left;}. Box_img {padding: px; граница: Px solid #ccccc;файл JS:
Функция math.floor () может быть округлена вниз.
Math.min.apply (null, ighterarr); Функция может получить минимальное значение массива HeightArr.
window.onscroll = function () {}; Эта функция запускается при скольжении страницы.
document.documentelement.clientHeight; Высота, отображаемая браузером.
document.documentelement.scrolltop; расстояние до скольжения.
/*** Создан ASUA на 2016/4/9.*/Window.onload = function () {imglocation ("content", "box"); var lodeimage = {"date": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, ",". "src": "7.jpg"}, {"src": "8.jpg"}, {"src": "9.jpg"}, {"src": "10.jpg"},]} window.onscroll = function () {ifflag ()) {for (var i = 0; i <lodeimage.date.length; i ++) {var box = document.createElement ("div"); box.classname = "box"; var cparent = document.getElementbyId ("content"); cparent.appendchild (box); var box_img = document.createElement ("div"); box_img.classname = "box_img"; box.appendchild (box_img); var img = document.createElement ("img"); img.src = "img/"+lodeimage.date [i] .src; box_img.appendchild (img);} imglocation ("content", "box");}}} functionflag () {var cparent = document.getelemementbyid ("content"); ccontent = getChildElement (cparent, "box"); var lastContentHeight = ccontent [ccontent.length-1] .offsettop; var scrollheight = document.documentelement.scrolltop || document.brolltop; var pageHeight = document.documentelement.clientHeight || document.body.clientHeight; console.log (lastContentHeight+":"+scrollheight+":"+pageHeight); if (lastContentHeight <scrollheight+pageHeight) {return true;}} Функция Imglocation (родитель) {var) {var cparent = document.getElementbyId (родитель); var ccontent = getChildElement (cparent, ребенок); var imgwidth = ccontent [0] .OffSetWidth; var cols = math.floor (document.documentelement.clientwidth/imgwidth); cparent.style.csstext = "width:"+imgwidth*cols+"px; margin: 30px auto"; var heightArr = []; для (var i = 0; i <ccontent.length; i ++) {if (i <cols) {heightArr.push (ccontent [i] .offsetheight);} else {var minHeight = math.min.apply (null, heightArr); var minindex = getminindex (heightarr, minheight); ccontent [i] .style.position = "Absolute"; ccontent [i] .style.top = minheight+"px" ; getMinindex (ighterarr, minheight) {for (var i = 0; i <heightArr.length; i ++) {if (ightarar [i] == minheight) {return i;}}} function getChildElement (родитель, контент) {var contentArr = []; var allContent = parent.getElementsbytagname (""); i = 0; i <allcontent.length; i ++) {if (allContent [i] .classname == content) {contentarr.push (allcontent [i]);}} return contentarr;}Хорошо, код для эффекта потока водопада, который автоматически загружает изображения JS, был введен вам здесь. Я надеюсь, что это будет полезно для вас!