JS实现瀑布流

原理：

获取一张图片的宽度(所有图片的宽度是一定的)。

计算出浏览器一行图片的列数(页面宽度/图片宽度)。

new 一个新的数组，用于存放叠加图片的高度。

for循环图片个数，小于列数时，直接往页面上添加，同时把该图片的高度push到数组中。

大于列数时，图片的高度往上叠加。

HTML部分：

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>   </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"main"</code><code>&gt;</code>

<code>     </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"box"</code><code>&gt;</code>

<code>       </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"pic"</code><code>&gt;</code>

<code>         </code><code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"images/0.jpg"</code><code>/&gt;</code>

<code>       </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>     </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>      </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"box"</code><code>&gt;</code>

<code>         </code><code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"images/1.jpg"</code><code>/&gt;</code>

<code>         </code><code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"images/2.jpg"</code><code>/&gt;</code>

<code>     </code><code>/*一下多余图片与上一致*/</code>

<code>   </code><code>&lt;/</code><code>div</code><code>&gt;   </code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

CSS部分：

<code>*{</code>

<code>   </code><code>margin</code><code>:</code><code>0</code><code>;</code>

<code>   </code><code>padding</code><code>:</code><code>0</code><code>;</code>

<code>}</code>

<code>#main{</code><code>position</code><code>: </code><code>relative</code><code>;}</code>

<code>.box{</code>

<code>     </code><code>padding</code><code>:</code><code>15px</code> <code>0</code> <code>0</code> <code>15px</code><code>;</code>

<code>     </code><code>float</code><code>:</code><code>left</code><code>;</code>

<code>   </code><code>}</code>

<code>.pic{</code>

<code>     </code><code>padding</code><code>:</code><code>10px</code><code>;</code>

<code>     </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#ccc</code><code>;</code>

<code>     </code><code>border-radius:</code><code>5px</code><code>;</code>

<code>     </code><code>box-shadow:</code><code>0px</code> <code>0px</code> <code>5px</code> <code>#ccc</code><code>;</code>

<code>.pic img{</code>

<code>    </code><code>width</code><code>:</code><code>165px</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>auto</code><code>;</code>

最核心的部分--JS：

<code>window.onload =</code><code>function</code><code>() {</code>

<code>    </code><code>waterfall(</code><code>'main'</code><code>, </code><code>'box'</code><code>);</code>

<code>function</code> <code>waterfall(parent,box){</code>

<code>    </code><code>var</code> <code>oParent =  document.getElementById(parent);</code>

<code>    </code><code>var</code> <code>oBoxs=getByClass(oParent,box);</code><code>//获取父元素下的所有的class为box的子元素</code>

<code>    </code><code>var</code> <code>oBoxW=oBoxs[0].offsetWidth;</code>

<code>    </code><code>//列数</code>

<code>    </code><code>var</code> <code>clos=Math.floor(document.documentElement.clientWidth/oBoxW);</code>

<code>    </code><code>//设置main的宽度</code>

<code>    </code><code>oParent.style.cssText=</code><code>'width:'</code><code>+oBoxW*clos+</code><code>'px;margin:0 auto'</code><code>;</code>

<code>    </code><code>var</code> <code>arrH=</code><code>new</code> <code>Array();</code>

<code>    </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;oBoxs.length;i++){</code>

<code>        </code><code>if</code><code>(i&lt;clos){</code>

<code>            </code><code>arrH.push(oBoxs[i].offsetHeight);</code>

<code>        </code><code>}</code><code>else</code><code>{</code>

<code>        </code><code>//获取高度最小的图片</code>

<code>            </code><code>var</code> <code>minH=Math.min.apply(</code><code>null</code><code>,arrH);</code>

<code>           </code> 

<code>            </code><code>//获取高度最小的图片的index</code>

<code>            </code><code>var</code> <code>index=getIndexMinH(arrH,minH);</code>

<code>            </code> 

<code>           </code><code>oBoxs[i].style.position=</code><code>'absolute'</code><code>;</code>

<code>           </code><code>oBoxs[i].style.top=arrH[index];</code>

<code>           </code><code>oBoxs[i].style.left=oBoxs[index].offsetLeft;</code>

<code>           </code><code>arrH[index]=arrH[index]+oBoxs[i].offsetHeight;</code>

<code>        </code><code>}</code>

<code>    </code><code>}</code>

<code>   </code><code>console.log(arrH);</code>

<code>function</code> <code>getByClass(parent,box){</code>

<code>    </code><code>var</code> <code>boxs=</code><code>new</code> <code>Array();</code><code>//用来存取box的元素</code>

<code>    </code><code>tags= parent.getElementsByTagName(</code><code>'*'</code><code>);</code><code>//获取父元素下的所有元素</code>

<code>    </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;tags.length;i++){</code>

<code>        </code><code>if</code><code>(tags[i].className==box){</code>

<code>            </code><code>boxs.push(tags[i]);</code>

<code>    </code><code>return</code> <code>boxs;</code>

<code>function</code> <code>getIndexMinH(arr,val){</code>

<code>    </code><code>for</code><code>(</code><code>var</code> <code>i </code><code>in</code> <code>arr){</code>

<code>       </code><code>if</code><code>(arr[i]==val){</code>

<code>           </code><code>return</code> <code>i;</code>

<code>       </code><code>}</code>

本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1679731，如需转载请自行联系原作者