javascript实现瀑布流自适应遇到的问题及解决方案

这几天看了艾米老师的用爪哇岛描述语言实现瀑布流，我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕，以后改变窗口大小就不能做到自适应了。

于是我想到了用window.onresize来使得瀑布流函数从新加载来达到目的，

复制代码代码如下：窗口。onload=function(){//瀑布流函数瀑布('内容','盒子');//模拟数据加载var Dataint={ ' data ' :[{ ' src ' : ' 01。jpg ' }，{'src':'02.jpg'}，{'src':'03.jpg'}，{'src':'04.jpg'}，{'src':'05.jpg'}，{'src':'06.jpg ' '当屏幕大小改变时从新执行瀑布流函数达到从新适应的作用window.onresize=function(){//瀑布(“内容”、“框”)；setTimeout(函数(){ 0瀑布(“内容”、“框”)；}, 200);}窗口。on scroll=function(){ if(CheckScoll()){ var opa rent=document。getelementbyid(' content ')；//将熏染的数据添加入超文本标记语言中for(var I=0；艾达覃。数据。长度；I){ var obox=document。创建元素(' div ')；obox.className=' boxopa租金。append child(obox)；var opic=文档。创建元素(' div ')；opic.className=' picobox。appendchildvar oImg=文档。创建元素(' img ')；奥姆。src=' http : img/' Dataint。数据[一].透视的。append child(oImg)；}瀑布(“内容”、“框”)；} }}

当屏幕缩小时是可以的，但是从缩小的放大就出现了病菌

看没看到后面几列的顶部回不来了，于是我打开开发工具看是怎么回事，

第3 4 5个差异中不应该有风格，是因为缩小的时候给他添加上去的，而放大了他没有清除所以保留下来了就会出现这个样子于是：我在瀑布流函数里加了句aBox[I]。风格。CSsText=使得每次进来都清空风格

复制代码代码如下：函数瀑布（父，框){ //将内容下所有类盒取出来var aParent=文档。getelementbyid(父级);var aBox=getBclass(aParent，box)；//获取盒子的宽度var aBoxW=aBox[0].offset with//用浏览器的可是宽度除以包厢宽度得到列数var cols=数学。楼层(文件。文档元素。客户端宽度/AbOxW)；//设定内容的宽度和居中公寓。风格。c text=' width : ' AbOxW * cols ' px；高度：自动相对位置：margin:0汽车填充-右侧：15 px '；//创建每一列的高度数组var HARr=[]；for(var I=0；iaBox.lengthI){ ABOx[I]。风格。CSsText=if(icols){ hArr.push(aBox[i]).右偏);} else { var MInh=Math。量滴应用(null，HARr)；var index=getMinIndex(hArr，MInh)；//找出高最矮的索引值//控制台。日志(AbOxW)；aBox[I]。风格。位置='绝对'；aBox[I]。风格。top=MInh ' pxABox[I]。风格。left=ABoXw * index ' pxhArr[index]=aBox[i].偏右；} }}

这样就解决了缩小后回不来的BUG，可以正常自适应了

最后我把整个的爪哇岛描述语言贴出来

复制代码代码如下：窗口。onload=function(){//瀑布流函数瀑布('内容','盒子');//模拟数据加载var Dataint={ ' data ' :[{ ' src ' : ' 01。jpg ' }，{'src':'02.jpg'}，{'src':'03.jpg'}，{'src':'04.jpg'}，{'src':'05.jpg'}，{'src':'06.jpg ' '当屏幕大小改变时从新执行瀑布流函数达到从新适应的作用window.onresize=function(){//瀑布(“内容”、“框”)；setTimeout(函数(){ 0瀑布(“内容”、“框”)；}, 200);}窗口。on scroll=function(){ if(CheckScoll()){ var opa rent=document。getelementbyid(' content ')；//将熏染的数据添加入超文本标记语言中for(var I=0；艾达覃。数据。长度；I){ var obox=document。创建元素(' div ')；obox.className=' boxopa租金。append child(obox)；var opic=文档。创建元素(' div ')；opic.className=' picobox。appendchildvar oImg=文档。创建元素(' img ')；奥姆。src=' http : img/' Dataint。数据[一].透视的。append child(oImg)；}瀑布(“内容”、“框”)；} } }函数瀑布（父，框){ //将内容下所有类盒取出来var aParent=文档。getelementbyid(父级);var aBox=getBclass(aParent，box)；//获取盒子的宽度var aBoxW=aBox[0].offset with//用浏览器的可是宽度除以包厢宽度得到列数var cols=数学。楼层(文件。文档元素。客户端宽度/AbOxW)；//设定内容的宽度和居中公寓。风格。c text=' width : ' AbOxW * cols ' px；高度：自动相对位置：margin:0汽车填充-右侧：15 px '；//创建每一列的高度数组var HARr=[]；for(var I=0；iaBox.lengthI){ ABOx[I]。风格。CSsText=if(icols){ hArr.push(aBox[i]).右偏);} else { var MInh=Math。量滴应用(null，HARr)；var index=getMinIndex(hArr，MInh)；//找出高最矮的索引值//控制台。日志(AbOxW)；aBox[I]。风格。位置='绝对'；aBox[I]。风格。top=MInh ' pxABox[I]。风格。left=ABoXw * index ' pxhArr[index]=aBox[i].偏右；} }}//根据班级获取到元素函数getBclass(父类，类名){ var box arr=new Array()；//用来存储获取到的类//控制台。日志(父。原型)；alilement=parent。getelementsbytagname(' * ')；for(var I=0；iallElement.lengthi ){ if(等位基因[i].class name==CLaSS name){ boxar。推(ALlement[I])；} } return boxarr}//找出高最矮的索引值函数getMinIndex(arr，值){ for(arr中的var I){ if(arr[I]==值){ return I；} }}//建立一个检测轮轮滑动是否成立的函数返回真假function CheckRoll(){ var opa rent=document。getelementbyid(' content ')；var oBox=getBclass(oparent，‘box’)；var lastobxtop=ObOx[ObOx。长度-1].偏移顶部数学。地板(ObOx[ObOx。长度-1].偏移量ThEight/2)；//控制台。log(lastobxtop)；var滚动顶部=文档。尸体。向上滚动| |文档。文档元素。滚动顶部；var高度=文档。尸体。客户端高度| |文档。文档元素。客户身高；//控制台。日志(滚动顶部)；返回(lastoBoxTopscrollTop高度)?true:false}

钢性铸铁文件贴出来

复制代码代码如下： * { margin : 0；padd : 0；}正文{背景-color : # eee；}.内容{位置：相对；}.box { padding: 15px 0 0 15px向左浮动：}.pic { padd : 10pxborder : 1px固体# ccc盒子阴影： 0 5px # CCCCCC；边界半径： 5px背景# fff}。pic img { width : 220 pxheart : auto order : 1px固体# eee}

超文本标记语言文件贴出来

你好绿筠小姐3360号！DOCTYPE htmlhtml标头meta charset=' utf-8 '/title vasscript朱塞佩朱塞佩/title link rel='样式表'=' text/CSS ' href=' CSS/pubuli。CSS '/脚本类型=' text/JavaScript ' src '=' http 3360 js/my。js '/脚本/头体div id=' content ' div class=' box ' div class=' pic ' img src=' http 3360 img/01。jpg '/div/div class=' box ' div class=' pic ' img src=' http 3360 img/02。jpg '/div/div class=' box ' div class='/div/div类=' box ' div class=' pic ' img src=' http 3360 img/09。jpg '/div/div class=' box ' div class=' pic ' img src=' http 3360 img/10。jpg '/div/div class=' box ' div class=' pic ' img src=' http 3360 img/11。jpg '/div/div class=' box ' div class=' pic ' img src=' http 3360 img/12。jpg '/div/div class=' box '/div/div class=' box ' div class=' pic ' img src '=' http 3360 img/19。jpg '/div/div class=' box ' div class=' pic ' img src=' http 3360 img/20。jpg '/div/div class=' box ' div class=' pic ' img/21。jpg '/div/div class=' box ' div class=' pic ' img src=' http 3360 img/22。jpg '/div/div/body/html

嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿，嘿，嘿，嘿，嘿，嘿，嘿，嘿，嘿，嘿，嘿，云娥与云娥同在，你是谁？你是谁。云娥与云娥同在和(^_^)和