本文用纯js代码手写瀑布网页的效果，初步实现了一个基本的瀑布布局，以及模拟ajax数据滚动到底部后加载新图片的功能。

缺点：

1.程序没有响应，无法实时调整页面宽度；

2.当程序中加入ajax模拟数据图片时，整个页面的所有图片都会被重新定位一次。

3.程序是在读取图片大小之前等待所有图片加载完毕。实际上，决不能这样做。

4.在实际项目中，后台程序应该给出图片大小值，图片的宽度属性应该直接在js代码中使用。

思考这个过程：

Html结构：

body div id=' container ' div class=' box ' div class=' box _ img ' img src=' http : img/1 . jpg '/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/2 . jpg '/。

1.将#container设置为位置position:relative

2.准备好了。箱到浮动t : left；

3.网页加载后，定位所有图片；

3.1画面宽度固定。计算当前页面每行可容纳的图片数num，得到#container的宽度，然后设置页面中心；

3.2循环遍历所有图片，以第一个num图片的默认浮动布局为第一行，存储在array box8tarr=[]；

3.3第一行布局完成后，安排下一张图片，更新Boxhigharr []:

3.3.1将下一张图片放在第一行(位置：absolute)最短图片的下方，即Boxheight []中高度最小的一列，并记录以下数字的索引值：minIndex

3.3.2更新box8 arr[]中的最小值(box8 arr[minindex]当前图片的高度)；

3.4重复3.3中的步骤，直到所有图片都排列好。

第二，实时监控滚动高度，是否加载新数据。

1.初始化后，从顶部获取最后一张图片的高度：lastContentHeight。

2.使用window . onscroll=function(){ 0.}.

当前页面滚动高度的实时监控是：scrollTop。

实时监控当前页面的窗口高度：页面高度。

3.当页面检测到：LastContentHeight Scroll Top Page Height时，使用ajax获取新添加图片的json数据。

第三，页面底部的新内容。

1.使用一个循环，首先创建一个新的图片容器，将其添加到底部，然后将json数据中对应的图片数据，如path，写入容器中完成图片的添加。

2.添加完所有新添加的图片后，对整个页面的所有图片和布局重新执行步骤1中的初始化操作。

项目文件夹：

> index.html:提前一些图片数据。

！doctype html html head meta charset=' utf-8 ' link rel='样式表' type=' text/CSS ' href=' CSS/style。CSS '/脚本src=' http 3360 js/app。js '/脚本标题脚本朱塞佩朱塞佩/title/head body div id=' container ' div class=' box ' div class=' box _ img ' img src=' http 3360 img/1。jpg '/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/2。jpg '/div/div class=' box _ img ' img src=' http 3360 img/3。jpg '/div/div class=' box ' div class=' box _ img ' img src '=' http 3360 img/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/9。jpg '/div/div class=' box ' div class=' box _ img ' img src '=' http 3360 img/10。jpg '/div/div class=' box _ img ' img src=' http 3360 img/1。jpg '/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/2。jpg '/div/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/9。jpg '/div/div class=' box ' div class=' box _ img ' img src '=' http 3360 img/10。jpg '/div/div class=' box _ img ' img src=' http 3360 img/1。jpg '/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/2。jpg '/div/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/9。jpg '/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/9。jpg '/div/div class=' box ' div class=' box _ img ' img src=' http 3360 img/10。jpg '//div/div/body/html样式。CSS 3330

*{利润： 0;填充；} #容器{相对位置：}。箱{填充33636 5px浮动3360左；}。box_img{填充336360 5px边界： 1px固体#ccc盒影： 0 5px # CCC边界半径： 5px}。box _ img宽度： 150像素高度：辆汽车；} app。js :

窗户。onload=function(){ img位置(' container '，' box ')；//Ajaxvar img data={ ' data ' 3360[{ ' src ' 3360 ' 2。jpg ' }，{ ' src ' 3360 ' 3。jpg ' }，{ ' src ' 3360 ' 5。jpg ' }，{ ' src ' 3360 ' 6。jpg ' }，{ ' src ' 3360 ' 8。jpg ' }，{ ' src ' 3360 ' 2。jpg ' }，{ ' src ' 3360 ' 3。jpg ' }，{ ' src ' 3360 ' 4。jpg '你好你好var cparent=document。getelement byid(' container ')；//哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟阿贾克斯唉呀呀呀呀呀呀呀呀呀呀呀呀S7-1200可编程控制器：iimgdata。数据。长度(I){ var cccontent=文档。创建元素(' div ')；ccnt。类名=' boxcparent。append child(ccnt nt nt)；var box img=文档。创建元素(' div ')；boximg。box _ imgccnt .追加子项(框img)；var img=文档。创建元素(' img ')；img.src='img/' imgData.data[i].src(中央支助事务厅);方框img。追加子级(img)；} //阿叔阿叔阿叔阿叔阿叔阿叔阿叔imgLocation('容器'，'盒子')；} }:函数检查标志(){ var cparent=document。getelement byid(' container ')；var ccnt=get子元素(cparent，" box ")；//你好你好你好，菊治，柳井var lastcontentheight=ccnt content[ccnt。长度-1].offsettopvar滚动顶部=文档。文档元素。向上滚动| |文档。尸体。滚动顶部；var页面高度=文档。文档元素。客户端高度| |文档。尸体。客户身高；控制台。日志(lastcontentheight ' 3330 '滚动顶部' 3330 '页面高度):if(lastcontentheight滚动顶部页面高度){ 0返回真实语言函数(父，内容){ //是吗父项何首乌很高兴见到你菲兰达var cparent=document。获取元素byid(父代):var ccnt=get子元素(cparent内容)://阿巧阿巧阿巧阿巧阿巧阿巧，云娥与云娥同在，{ fn华文楷体1ch 00 ffffb 0 }我不知道你在说什么{ fn华文楷体1ch 00 ffffb 0 }我不知道你在说什么。偏移宽度；//offsetwithts=宽度填充边框var num=数学。楼层(文件。文档元素。客户端宽度/img宽度)；cparent。风格。CSS text=' width 3360 ' img width * num ' px；利润33600汽车；//alert('暂停')://徐永旺，你是说.var BoxHeightArr=[]:S7-1200可编程控制器：iccontent。长度(一){ if(INM){//你是说.拳击高地合唱团我.偏移高度；//第40号命令个阿贾克斯诶哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，云娥与云娥同在，阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国阿曼苏丹国位置3330绝对cccontent[I]。风格。位置='静态'；} else { var我的身高=数学。量滴应用(空，框高arr)；var mini index=get Minh have location(箱高arr，Minh have)；//阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯？阿力克斯c内容[I]。风格。位置='绝对'；我。风格。top=我的身高‘px’；内容【我】。风格。左=内容[迷你索引]。offsetleft ' px//哎哎哎哎哎哎哎哎""你是说.",//阿巧是吗安泰安泰安泰安泰安泰安泰安泰安泰盒子高度arr[迷你索引]=[盒子高度arr]ccnt[I].偏移高度；}:}//范思哲，范思哲，范思哲函数get Minh have location(盒子高度arr，最小高度){ for(盒子高度arr中的var I){ if(盒子高度arr[I]==我的高度){ return I；} } } }//阿宽box函数获取子元素(父元素，内容){ content arr=parent。getelement sbyclasname(内容)；返回contentarr}阿勃良：

朱塞佩朱塞佩朱塞佩朱塞佩，吴亚玲！吴亚玲JavaScript(JavaScript)朱庇特阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹阿齐兹。