JS初级瀑布流效果的实现

我今天起得很早，在大型开放在线课程中看到了瀑布流。非常详细，非常好。我只能在代码中添加一些注释，并在我的博客中谈论我的想法。建议大家看一下海量开放在线课程的瀑布教程，非常详细。每个细节都很好。只要了解JS的基本代码，似乎应该不是什么大问题。里面没有难得的方法，但是因为思维上的问题，你自己写不出来。下面详细说说几个关键方法的代码。建议你去海量开放在线课程详细学习HTML和CSS。

div id=' main '/a main包含整个页面内容，box用作外部容器。Img作为图片容器Div class=' box ' Div class=' pic ' img src=' http 3360 img/0 . jpg '/Div/Div class=' box ' Div class=' pic ' img src=' http 3360 img/0 . jpg '/Div/Div//CSS//此处填充使用的是填充值，因为offsetHeight是包含填充但不包含边距*后的一种方便的高度测量方式{ margin: 0pxpadding: 0px} # main { position: relative//在main上设置相对定位，在JS上设置绝对定位，控制图片位置。box { padding : 15px 0 0 15px向左浮动：}.pic { padding: 10pxborder: 1px固体# cccborder-radius :5 px；box-shadow : 0 5px # CCC；}.pic img { width: 168px//瀑布流宽度均匀但高度不同，高度具有适应性。height: auto}JS代码

在编写JS代码之前，我们需要弄清楚自己需要什么方法，是否需要打包调用，先做什么，然后先做什么？在瀑布流中，我们需要做的第一件事是获取所有的小部件，也就是盒子。不管我们做什么，都是盒子处理或者img处理，所以我们需要拿到所有的盒子，这样我们就可以打包了

//根据类{//传入父元素和所需的类var boxArr=new Array//，获取元素函数getbyclass (parent，clsname)，用于存储和获取类为box的所有元素。您可以使用[]，创建oellections=parent . getelementsbyname(' * ')；//取出(var I=0；i oElements.lengthI) {//我们需要遍历所有的子元素if(oeelements[I]。class name==cls name)//如果我们找到对应的子元素boxarr . push(oeelements[I])；//取出传递的相等className //push是数组的方法}；返回boxArr然后我们得到我们想要的课程。之后我们该怎么办？我们需要从一个框中获取第一行中有多少元素。因为我们之前没有确定我们的主要宽度，它是自适应的。也就是说，当我们缩小页面时，每行的元素都会相应减少。为了让瀑布流代码更适用，让不同大小的图片都适用，我们需要手工计算一张。我们可以计算出页面的总宽度是盒子的宽度，就可以了

var oBoxW=oBoxs[0]。offsetWidth//box的宽度提到填充值varclos=math。floor(document . document element . client width/obo xw)//计算列数，这样我们就计算出了列数。不管图片的宽度如何变化，我们都可以算出地板是用来取整数的。因为我们的px没有浮点数字类型来避免计算错误，所以整数运算。style . CSS text=' width : ' obo xw * clos ' PX；保证金：0自动'；设置main的宽度

我们得到列数后，第一行的图片一定是宽度相同，长度不同，对吗？也就是说，第二行的图片需要连接到第一行图片的后面。我们不能一个一个操作，但可以一个一个操作。我们如何操作它？我们可以得到第一行高度最小的下一张图片，也就是说，如果第一行有七张图片，那么下一张就是第八张。如何把第八张图片放在最小高度的图片上？我们先考虑一下。我们首先需要找到第一行中的最小值。我们有一个Math.min来求最小值，但是我们的函数不能传入来使用数组。它只能是具体数字的一半。应用以扩展范围并在代码中显示

var HARr=[]；//每列的高度值为(var I=0；i oBoxs.lengthI) {if(iclos){//先记录身高harr。push (oboxs [I]。在第一行的右边);//放入}else{//如果到达第二行，开始计算var Minh=math.min.apply (math，harr)；最小值计算//为什么可能？我们原本不能传递数组。我们通过apply将范围绑定到Math，也就是说，我们仍然执行这个函数。但是apply的第二个参数需要是一个数组，所以我们间接把这个参数传递到一个数组中，也就是说，我们仍然使用Math函数，但是这个值变成了数组中的值。//console . log(Minh)var index=getminh index(harr，Minh)//获取索引oboxs [I]。style.position=“绝对”；我们可以发现传入的数组和最小值obo xs[I]. style . top=MInh ' px '；下一张照片的高度救了球。OBOXS [I]。风格。left=OBOXW * index ' px左边的距离是索引乘以元素harr[index]=obox[I]的宽度。偏右；//我们添加图片后，需要刷新数组中的高度，然后寻找下一个最小的，再在它下面添加一张图片，循环一次} }；函数getmin index(arr，val){ for(arr中的var I){//找到其中的最小值，并在(arr[I]==val){ return I；}}}以上大体做了一个瀑布流样式，只是拖动滚动条加载，肯定需要后台的支持。在大规模的在线开放课程上，老师做了一个假的处理。建议在这里观看海量开放在线课程视频，插图非常清晰。我无法用语言或图片很好地表达它。

var dataInt={ ' data ' :[{ ' src ' : ' 0 . jpg ' }，{'src':'1.jpg'}，{'src':'2.jpg'}，{'src':'3.jpg'}]}//我们编写一个json数据窗口. on scroll=function(){ if(checkscroll slide){ var o parent=document . getelementbyid(' main ')//I dataint . data . length；I){//add varobox=document . create element(' div ')；oBox.className=' boxopa rent . appendchild(ObOx)；var opic=document . create element(' div ')；opic.className=' picobox . appendchild(opic)；var oimg=document . create element(' img ')；oimg.src='img/' dataInt.data[i]。src//向opic添加数据。appendchild (oimg)}瀑布(' main '，' box ')；//过一会看完整的代码，这是刚才那些的包}}函数checkscrollsslide(){//检查是否有加载数据块var o parent=document . getelementbyid(' main ')的条件；var obox=GetByClass(opa rent，Box') var lastboxh=obox [obox。长度-1]。场外数学。地板(obox [obox。长度-1]。偏右/2)找出从最后一张图片的一半到页面顶部的距离。尸体。scrolltop | |文档。document element var height=document . body . client height | | document . document element . client height；返回(lastBoxHscrollTop高度)？true:false//如果页面与顶部(包括滚轮)的距离小于滚轮与页面的距离，则返回true}完成JS代码

窗户。onload=function(){ water fall(' main '，' box ')；//JSON var data int={ ' data ' 3330[{ ' src ' 3330 ' 0。jpg ' }，{ ' src ' : ' 1。jpg ' }，{ ' src ' 3330 ' 2。jpg ' } } }窗口。onscroll=function(){ if(checkscrollide){ var opart=document。getelement byid(' main ')/你是谁？你是谁？你是谁for(var I=0)；我数据点。数据。长度(I){ var obex=文档。创建元素(' div ')；obox。盒子不透明追加子对象(obex)；var opic=文档。创建元素(' div '):opic。微微盒。appendchild(鸦片剂);var oimg=文档。创建元素(' img ')；oimg.src='img/' dataInt.data[i].src(中央支助事务厅);opic.appendChild(oimg) }瀑布(' main '，' box ')；} }函数瀑布（父代，框){ //是吗手！手-什么事类吾曰盒子！盒子阿叔阿叔阿叔var opart=文档。获取元素byid(父代):var obo xs=getby类(不透明，框)/(控制台。log(obo x . length)//范希洛范希洛（云娥/箱是吗)var obxw=obxs[0].偏移宽度；//控制台。日志(obxw)；var clos=数学。楼层(文件。文档元素。客户端宽度/obo xw/)哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟//console.log(已关闭)//沙吾提手！手云娥不透明。风格。CSS text=' width 3360 ' obo xw * closed ' px；利润33600汽车；var hArr=[]://哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟for(var I=0)；双簧管。长度；(一){ if(iclos){ harr。push(obo xs[I]).右偏(偏移高度):} else { var Minh=math。量滴应用(数学，harr)；//控制台。log(Minh)var index=getminindex(harr，minH)//三、结论obo xs[I]。风格。位置='绝对'；obo xs[I]。风格。top=Minh ' px "；obxs[I]。风格。left=obxw * index ' px哈罗德[索引]=oBoxs[i].偏移高度；//陈鉴荣（签名)}://console.log(hArr)}//你好类范儿getByClass函数（父级，clname){ var box arr=new array//云娥与日俱增类吾曰盒子！盒子阿琼元素=父元素。get element sbytname(' * ')；//吴亚玲吴亚玲for(var I=0)；我。元素。长度(一){ if(元素[i]).类名==clname)box arr。推送(元素[I])；//嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨className }:归还拳击馆；}函数getminindex(arr，val){ for(var I in arr){ if(arr[I]==val){ return I；} }函数checkscrollide(){//吴亚玲吴亚玲吴亚玲吴亚玲var opart=文档。get元素byid(' main '):var obo xs=getbyclass(不透明、' box ')var load oxh=obxs[obxs。长度-1].场外数学。地板(obxs[obxs。长度-1]).偏移高度/2)var滚动顶部=文档。尸体。向上滚动| |文档。文档元素。滚动顶部；var高度=文档。尸体。客户端高度| |文档。文档元素。客户身高；返回(荷载工况顶部高度)?true : false}阿曼苏丹国

云娥与云娥同在联署材料吴经熊和吴经熊，吴亚玲吴亚玲，(中文),是不是。范仲淹！范仲淹！范仲淹！范仲淹！范仲淹！