div+css_jq瀑布刘效果

这个只是图片瀑布流的一种 在百度搜索 jquery masonry下载库

图片瀑布流使用方法

 <style type="text/css">
#container {
  clear: both;
}
.box {
    border:0px;
}
.box img {
  display: block;
  width: 100%;
}
.col3 img { width: 120px; }
</style>

container是中间要实现这个效果的整体部分 加上 id container

box为单词循环的整体div clo3是限制图片大小的 也就是你要改变图片的大小首先要改变col3 大小

这个效果仅仅适用于图片或者div的宽度相等高度不想等的情况下

//中间部分

<div id="container">

<div class="box photo col3">
      <a href="http://www.flickr.com/photos/nemoorange/5013039951/" title="Stanley by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" /></a>
    </div>

.

.

.

.

很多的图片

</div>

//结束

<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script>
  $(function(){

    var $container = $('#container');
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box'
      });
    });
  
  });
</script>