瀑布自适应问题的Javaｓｃｒｉｐｔ实现及解决方案
最近几天，我看了艾米老师用javaｓｃｒｉｐｔ来实现瀑布，我跟着代码走了出来。发现这样的文字只能装第一次才能适应屏幕，然后改变窗口的大小不能自适应。所以我想利用window.onresize从新加载实现目标使瀑布功能，
复制代码代码如下所示：
窗口。指针函数（）{
瀑布流函数
瀑布（'content'，'box）；
模拟数据加载
无功dataint = {数据：{ {src：01。jpg}，{src：02。jpg}，{src：03。jpg}，{src ：04。jpg}，{src：05。jpg}，{src：06。JPG }，{src：07.jpg} } }
当屏幕大小发生变化时，来自新功能的流以适应新的执行下降的角色。
窗口。onresize =函数（）{
/ /瀑布（'content'，'box）；
setTimeout（函数（）{瀑布（'content'，'box '）；}，200）；
}
窗口。onscroll =函数（）{
如果（checkscroll（））{
无功oparent = document.getelementbyid（'content'）；
将数据添加到html中的影响
对于（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）；
无功oimg = document.createelement（IMG）；
OImg。src=IMG / + dataint。数据{我}，SRC；
opic.appendchild（oimg）；
}
瀑布（'content'，'box）；
}
}
}
当屏幕缩小时，它是可以的，但缩放的大小是错误的。
我看不到后面几根柱子的顶部。
于是我打开工具，看看发生了什么事。
不应该有风格第三百四十五DIV，因为减少了对总计达他时间，他没有明显的放大，保存会出现这样我在瀑布流功能里加一盒{我}。style.csstext = ''；所以在所有空的风格
复制代码代码如下所示：
函数瀑布（父，框）{
内容类框将全部去掉
VaR的父母= document.getelementbyid（母）；
VaR的ABox = getbclass（父母、箱）；
获取框的宽度
无功aboxw = ABOX { 0 }。offsetwidth；
但浏览器的宽度是由栏数的宽度来划分的。
var列= math.floor（文档。文档元素}。clientwidth / aboxw）；
设置宽度和中心内容
aparent.style.csstext = 'width：+ aboxw *一+ 'px；高度：汽车；位置：相对；保证金：0自动填充右：15px；
创建每个列数组的高度
VaR Harr = { }；
对于（var i = 0；i < abox.length；i++）{
一盒{我}。style.csstext =；
如果（我<列）{
HArr.push（ABOX {我}。offsetheight）；
其他{ }
var胡志明= math.min.apply（null，Harr）；
VaR指标= getminindex（Harr，Minh）； / /找到最短的高指标值
/ / console.log（aboxw）；
一盒{我}。style.position =绝对的；
一盒{我}。style.top =胡志明+ 'px；
一盒{我}。style.left = aboxw *指数+ 'px；
Harr { } = {我指数一offsetheight }；
}
}
}
这样，在还原后不能返回的错误可以是自适应的。
最后，我把整个Javaｓｃｒｉｐｔ
复制代码代码如下所示：
窗口。指针函数（）{
瀑布流函数
瀑布（'content'，'box）；
模拟数据加载
无功dataint = {数据：{ {src：01。jpg}，{src：02。jpg}，{src：03。jpg}，{src ：04。jpg}，{src：05。jpg}，{src：06。JPG }，{src：07.jpg} } }
当屏幕大小发生变化时，来自新功能的流以适应新的执行下降的角色。
窗口。onresize =函数（）{
/ /瀑布（'content'，'box）；
setTimeout（函数（）{瀑布（'content'，'box '）；}，200）；
}
窗口。onscroll =函数（）{
如果（checkscroll（））{
无功oparent = document.getelementbyid（'content'）；
将数据添加到html中的影响
对于（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）；
无功oimg = document.createelement（IMG）；
OImg。src=IMG / + dataint。数据{我}，SRC；
opic.appendchild（oimg）；
}
瀑布（'content'，'box）；
}
}
}
函数瀑布（父，框）{
内容类框将全部去掉
VaR的父母= document.getelementbyid（母）；
VaR的ABox = getbclass（父母、箱）；
获取框的宽度
无功aboxw = ABOX { 0 }。offsetwidth；
但浏览器的宽度是由栏数的宽度来划分的。
var列= math.floor（文档。文档元素}。clientwidth / aboxw）；
设置宽度和中心内容
aparent.style.csstext = 'width：+ aboxw *一+ 'px；高度：汽车；位置：相对；保证金：0自动填充右：15px；
创建每个列数组的高度
VaR Harr = { }；
对于（var i = 0；i < abox.length；i++）{
一盒{我}。style.csstext =；
如果（我<列）{
HArr.push（ABOX {我}。offsetheight）；
其他{ }
var胡志明= math.min.apply（null，Harr）；
VaR指标= getminindex（Harr，Minh）； / /找到最短的高指标值
/ / console.log（aboxw）；
一盒{我}。style.position =绝对的；
一盒{我}。style.top =胡志明+ 'px；
一盒{我}。style.left = aboxw *指数+ 'px；
Harr { } = {我指数一offsetheight }；
}
}
}
根据类获取元素
功能getbclass（父母，className）{
无功boxarr =新（阵列）； / /被用来存储类
/ / console.log（母。原型）；
allelement = parent.getelementsbytagname（*）；
对于（var i = 0；i < allelement.length；i++）{
如果（allelement {我}。类名= = className）{
Boxarr.push（allelement {我}）；
}
}
返回boxarr；
}
查找最短的高/中索引值
功能getminindex（ARR值）{
对于（var i在ARR）{
如果（ARR {我} = =值）{
还我；
}
}
}
建立一个圆形检测函数/滑动函数来恢复真与假的建立。
功能checkscroll（）{
无功oparent = document.getelementbyid（内容）；
无功obox = getbclass（oparent，'box）；
无功lastoboxtop = obox { obox。length-1 }。offsettop + math.floor（obox { obox。length-1 }。offsetheight / 2）；
/ / console.log（lastoboxtop）；
VaR scrollTop =文件。身体。scrollTop | | document.documentelement.scrolltop；
VaR高度=文件。身体。自己的| | document.documentelement.clientheight；
/ / console.log（scrollTop）；
返回（lastoboxtop < scrollTop +高）真的假的；
}
CSS文件被张贴
复制代码代码如下所示：
*边距：0；填充：0；}
体{背景颜色：# EEE；}
内容{。
职位：相对；
}
箱{。
填充物：00 15px 15px；
浮点数：左；
}
PIC {。
填料：10px；
边境：1px solid # CCC；
盒子的影子：00 5px # cccccc；
边界半径：5px；
背景：# FFF；
}
PIC img {。
宽度：220px；
高度：自动；
边境：1px solid # Eee；
}
HTML文件被张贴
复制代码代码如下所示：
Javaｓｃｒｉｐｔ的瀑布流
好的，谢谢收看。我还没有写任何技术分享文章之前，有很多希望你能够改正不好的地方。从学习的菜鸟的前端（^ _ ^）Y