网页瀑布流设计

        这次我分享的是网页的瀑布流样式设计。瀑布流的样式在很多网页上都鞥看到特别是在照片的排版中更加常见，其中百度图片就是使用瀑布流的排版。

       能够实现瀑布流布局的有好几种，我使用的是masonry。这是一个jquery的一个插件。这是个很强大的排版插件，不光能对图片进行瀑布流排版，还能对网页中的div进行排版。masonry瀑布流排版实现很简单。

       首先要先加载<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.masonry.min.js"></script>这两个插件。

       接着

       <div id="con1_1">
           <div class="product_list"> <a href="#"><img src="image/5.jpg"></a><</div>
          <div class="product_list"> <a href="#"><img src="image/l1.jpg"></a></div>
  </div>

      按照masonry说说，con1_1是排版的父容器，对product_list进行瀑布流排版

     最后再加上js

     $(document).ready(function(){
    var $container = $('#con1_1');    
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.product_list',
            columnWidth: 5 //每两列之间的间隙为5像素
        });
    });

就完成了瀑布流排版