原生JS实现美图瀑布流布局赏析

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。

1. js代码：    

  
  



.wf-main{
  position: relative;
  margin: auto;
  width: px;
  overflow: hidden;
}
.wf-main .wf-cld{
  position: absolute;
  margin-bottom: px;
  padding:px px;
  width: px;
  left: -px;
  top: -px;
  line-height:px;
  border: px solid #;
  border-radius: px;
  background-color: #ccc;
  overflow: hidden;
}
.wf-cld .inner{
  position: absolute;
  left: -px;
  top: -px;
  margin-bottom: px;
  width: px;
  overflow: hidden;
  border: px solid #f;
  border-radius: px;
}
.wf-cld .title{
  margin:  px;
  padding: px;
  width: px;
  color: #f;
  font-size: px;
}


  、瀑布流
  

  


  



  
  

  


  



  
  

  

  


  



  
    、内部瀑布流
    -

    -
    -
    -
    -

    -
    -
    -
    -
  
  

  


  



  


  



  
  

  


  



  

2. [图片] 瀑布流.jpg