瀑布流

一.HTML

 <div class="main">
                            <!--瀑布流-->
                            <ul class ="tiles">
                                <li><img src="Content/Image/m1.jpg" width="200" height="283"/><p>商品1</p></li>
                                <li><img src="Content/Image/m2.jpg" width="200" height="300" /></li>
                                <li><img src="Content/Image/m3.jpg" width="200" height="252" /></li>
                                <li><img src="Content/Image/m4.jpg" width="187" height="278" /></li>
                                <li><img src="Content/Image/m5.jpg" width="200" height="283" /></li>
                                <li><img src="Content/Image/m6.jpg" width="203" height="277" /></li>
                                <li><img src="Content/Image/m7.jpg" width="220" height="286" /></li>
                                <li><img src="Content/Image/m8.jpg" width="198" height="297" /></li>
                                <li><img src="Content/Image/m9.jpg" width="169" height="315" /></li>
                                <li><img src="Content/Image/m10.jpg" width="200" height="330" /></li>
                                <li><img src="Content/Image/m11.jpg" width="110" height="200" /></li>
                                <li><img src="Content/Image/m12.jpg" width="195" height="283" /></li>
                                <li><img src="Content/Image/m13.jpg" width="200" height="283" /></li>
                                <li><img src="Content/Image/m14.jpg" width="220" height="330"/></li>
                                <li><img src="Content/Image/m1.jpg" width="200" height="283" /></li>
                                <li><img src="Content/Image/m2.jpg" width="200" height="300" /></li>
                                <li><img src="Content/Image/m3.jpg" width="200" height="252" /></li>
                                <li><img src="Content/Image/m4.jpg" width="187" height="278" /></li>
                                <li><img src="Content/Image/m5.jpg" width="200" height="283" /></li>
                                <li><img src="Content/Image/m6.jpg" width="203" height="277" /></li>
                                <li><img src="Content/Image/m7.jpg" width="220" height="286" /></li>
                                <li><img src="Content/Image/m8.jpg" width="198" height="297" /></li>
                                <li><img src="Content/Image/m9.jpg" width="169" height="315" /></li>
                                <li><img src="Content/Image/m10.jpg" width="200" height="330" /></li>
                                <li><img src="Content/Image/m11.jpg" width="110" height="200" /></li>
                                <li><img src="Content/Image/m12.jpg" width="195" height="283" /></li>
                                <li><img src="Content/Image/m13.jpg" width="200" height="283" /></li>
                                <li><img src="Content/Image/m14.jpg" width="220" height="330" /></li>
                              </ul>
                                @RenderBody()
                          </div>

二.CSS

/*瀑布流浏览方式*/
.main{
    width: 720px;
    height:auto;
    border: 1px solid #cccccc;
    margin-left: 12px;
    background: #fdeff2;
    float: right;
    position:relative;
}


.main ul{

    list-style:none;
}


.main ul li{

     border: 1px solid #cccccc;
}

三.JS

jQuery(function($){
    $(‘.tiles li‘).wookmark({       //这里是要实现瀑布流布局的对象
    autoResize: true,               //设置成true表示当window窗口大小改变的时候，重新布局
    container: $(‘.main‘),          //这个是容器名称 这个容器要必须包含一个css属性"position:relative" 否则你就会看到全部挤在页面的左上角了
    offset: 10,                     //2个相邻元素之间的间距
    itemWidth: 220,                 //指定对象的宽度
    resizeDelay: 50,               //这是延时效果 默认是50
    fillEmptySpace: false
});
});

注意：在Ul上注明clear:both; 容器是：position:relative;ul注明大小？

瀑布流,布布扣,bubuko.com

瀑布流

原文：http://www.cnblogs.com/beesky520/p/3812651.html