-
复制代码代码如下所示：
少（少预编译）
复制代码代码如下所示：
{ *
保证金：0；
填充：0；
}
{ #主要
职位：相对；
}
{。箱
Padding:15px 00 15px;
浮点数：左；
}
{。PIC
填料：10px；
边境：1px solid # CCC；
边界半径：5px；
盒子的影子：0px 0px 5px # CCC；
{ IMG
宽度：165px；
高度：自动；
}
}
Javaｓｃｒｉｐｔ（对自己理解的注释）
（函数有一些缺陷，仅用于学习理解）。
复制代码代码如下所示：
在window.onload =函数（）{
瀑布（）
调用自定义函数；
无功dataint = {数据：{ {src：7。jpg}，{src：8。jpg}，{src：9。jpg}，{src ：6。jpg} } }
JSON数据模拟；
window.onscroll =函数（）{
如果（checkscrollslide）{
调用自定义函数；根据函数返回值判断滚动是否超出范围；
无功oparent = document.getelementbyid（主要）；
对于（var i = 0；i < dataint.data.length；i++）{
无功obox = document.createelement（div）；
obox.classname =盒子；
oparent.appendchild（obox）；
创建一个框块
VaR OPIC = document.createelement（div）；
opic.classname =PIC；
obox.appendchild（OPIC）；
创建一个PIC块
无功oimg = document.createelement（IMG）；
/ /创建img元素
oimg.src = 图片 / + dataint。数据{我}，SRC；
设置图片/参考；
opic.appendchild（oimg）；
}；
瀑布（）
将动态生成数据块流布局；
}；
}；
}；
/ /容器的主要功能，自动调整数据块；
函数瀑布（父，框）{
在主删除项下的所有框元素；父代表父元素，Box代表Box元素；
无功oparent = document.getelementbyid（母）；
/ /父元素赋给变量oparent；
无功oboxs = getbyclass（oparent，箱）；
通过自定义函数，对父元素下的每个框元素；是所有框元素的集合；
这又会 / /箱元集分配给oboxs；（因为范围，变量不共享）；
/ / console.log（oboxs。长度）；
打印控制台中的Box元素的数量，用于调试；
无功oboxw = oboxs { 0 }。offsetwidth；
/ /每列的宽度计算；offsetwidth包含填充，宽度；
/ / console.log（oboxw）；测试；
var列= math.floor（文档。文档元素}。clientwidth / oboxw）；
整个页面的计算显示列的数量（页面宽度/框宽度）；
oparent.style.csstext =宽度+ oboxw *一+PX；保证金：0汽车；
主宽度的父=每个列的宽度*列的数目；以及；
VaR Harr = { }；
每个列高度存储数组；
对于（var i = 0；i < oboxs.length；i++）{
/ /导线oboxs阵列；
如果（我<列）{
这里是满足第一列每个列第一行的条件；
HArr.push（oboxs {我}。offsetheight）；
获取数组中每个列的高度；
其他{ }
这里的box元素不是第一行元素；
var胡志明= math.min.apply（null，Harr）；
最小高度第一行，并赋给变量；
/ / console.log（明）；
VaR指标= getminhindex（Harr，Minh）；
调用自定义函数获取索引的变量值；
oboxs {我}。style.position =绝对；
oboxs {我}。style.top =胡志明+PX；
oboxs {我}。style.left = oboxw *指数+PX；
设置当前元素的位置；
当前元素 =索引元素的顶部元素值，每个列的宽度；
/ / oboxs {我}。style.left = oboxs {指数}。offsetleft +PX；
获取左元素的当前值；
在第一列索引中的这一点；
Harr {指数} + = oboxs {我}。offsetheight；
框元素高度=每列更新后的每一列的原始高度+稍后添加的高度；
}；
}；
}；
js是通过类获取元素的本机；
功能getbyclass（父母，claname）{
通过课堂上获得 / /元素；（父父元素；在容器中的claname）
无功boxarr =新的数组（）；
语句/所有类存储数组，用于访问框的元素；
无功oelements = parent.getelementsbytagname（*）
用于存储（*）父元素的所有子元素的语句变量；
对于（var i = 0；i < oelements.length；i++）{
/ / oelements遍历数组；
如果（oelements {我}，{ claname classname = =）
/ /如果类在同一claname数组的一个元素的一些参数；
BoxArr.push（oelements {我}）；
这个盒子 / /分为boxarr数组元素遍历；
}；
}；
返回boxarr；
调用数组，通过一系列函数遍历，将返回到调用函数数组中；
}；
获取数组元素索引；
功能getminhindex（ARR，Val）{
/ / ARR是父母阵列；瓦迩是当前元素；
对于（var i在ARR）{
从0开始/遍历；
如果（ARR {我} = = val）{
查找数组索引中当前对应的元素；
还我；
函数返回值是索引元素的值；
}；
}；
}；
是否检测滚动负载数据块条件；
功能checkscrollslide（）{
无功oparent = document.getelementbyid（主要）；
无功oboxs = getbyclass（oparent，盒）；
无功lastboxh = oboxs { oboxs。length-1 }。offsettop + math.floor（oboxs { oboxs。length-1 }。offsetheight / 2）；
/ /最后框元素从页面顶端高度（找到最后一盒（oboxs。lenght-1）offsettop）+自己的一半；
VaR scrollTop = document.body.scrolltop document.documentelement.scrolltop | |；
浏览器/滚动距离；
/ / console.log（scrollTop）；
VaR高度= document.body.clientheight document.documentelement.clientheight | |；
浏览器视口高度；
/ / console.log（高度）；
返回（lastboxh < scrollTop +高）真的假的；
/ /页面滚动距离大于offsettop盒的最后一个元素；
}；
总结：
用瀑布流显示图片要好得多。下面是瀑布流的实现（每行的长度等于浏览器窗口的长度）。它也可以通过CSS3，这很简单，你就知道谷歌一下。
我的想法可能是一幅画的图片插入。当这张线的图片保持长宽比和高度小于250时，一个周期就完成了，也就是说，插入了一行。
然后进入下一个循环并插入下一行。