工作中常常会用到瀑布流布局的结构,不管是pc端还是wap端。
自己写嫌麻烦 不妨用一下这个封装好的。

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#container{width:940px;margin:50px auto;}
#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
#container ul li{
    margin-bottom:20px;
    background-color:#fff;
    background-image:linear-gradient(to bottom#FFFFFF#E6E6E6);
    background-repeat:repeat-x;
    border-color:#e6e6e6 #e6e6e6 #B3B3B3;
    border-image:none;
    border-radius:4px 4px 4px 4px;
    border-style:solid;
    border-width:1px;
    box-shadow:0 1px 0 rgba(2552552550.2inset0 1px 2px rgba(0000.05);  
}
#container ul li img{width:298px;}
.water_user{color:#666;padding:10px;}
.water_option{background:#f5f5f5;border-top:1px #f0f0f0 solid;padding:5px 0 5px 10px;}
.water_option:after{content:"";display:block;clear:both;visibility:hidden;}
.water_option .option_item,.water_option .split{float:right;}
.water_option .option_item{color:#3e88cd;text-decoration:none;margin-right:10px;}
.water_option .option_item:hover{ text-decoration:underline;}
.water_option .split{display:inline-block;margin:5px 10px 0 0;height:12px;width:1px;background-color:#D8D8D8;}
 
.loadMeinvMOre{height:30px;line-height:30px;color:#999;text-align:center;background:#f9f9f9;display:block;clear:both;text-decoration:none;}
.loadMeinvMOre:hover{ background:#f0f0f0;color:#666;}

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="container">
    <ul class="col">
        <li>
            <div class="water_pic"><a href=""><img src="img/1.jpg" alt="" /></a></div>
            <div class="water_user">美女小清新_1</div>
            <div class="water_option">
                <a href="" class="option_item">收藏 4</a>
                <span class="split"></span>
                <a href="" class="option_item option_comt">评论 8</a>
                <span class="split"></span>
                <a href="" class="option_item option_relay">转播 124</a>
            </div>
        </li>
        <li>
            <div class="water_pic"><a href=""><img src="img/2.jpg" alt="" /></a></div>
            <div class="water_user">美女小清新_2</div>
            <div class="water_option">
                <a href="" class="option_item">收藏 4</a>
                <span class="split"></span>
                <a href="" class="option_item option_comt">评论 8</a>
                <span class="split"></span>
                <a href="" class="option_item option_relay">转播 124</a>
            </div>
        </li>
        <li>
            <div class="water_pic"><a href=""><img src="img/3.jpg" alt="" /></a></div>
            <div class="water_user">美女小清新_3</div>
            <div class="water_option">
                <a href="" class="option_item">收藏 4</a>
                <span class="split"></span>
                <a href="" class="option_item option_comt">评论 8</a>
                <span class="split"></span>
                <a href="" class="option_item option_relay">转播 124</a>
            </div>
        </li>
    </ul>
     
    <ul class="col"></ul>
     
    <ul class="col" style="margin-right:0"></ul>
     
    <a href="javascript:" class="loadMeinvMOre" id="loadMeinvMOre">加载更多</a>
</div>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(function() {
    //url data function dataType
    function loadMeinv() {
        var data = 0;
        for (var i = 0; i < 25; i++) {//每次加载时模拟随机加载图片
            data = parseInt(Math.random() * 25);
            var html = "";
            html = '<li><div class="water_pic"><a href="#"><img src = img/'
                + data + '.jpg></a></div><div class="water_user">美女小清新_'
                + data + '</div><div class="water_option"><a href="" class="option_item">收藏 4</a> <span class="split"></span><a href="" class="option_item option_comt">评论 8</a><span class="split"></span><a href="" class="option_item option_relay">转播 124</a></div></li>';
            $minUl = getMinUl();
            $minUl.append(html);
        }
    }
    loadMeinv();
    //无限加载
    $(window).on("scroll"function() {
        $minUl = getMinUl();
        if ($minUl.height() <= $(window).scrollTop() + $(window).height()) {
            //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
            //loadMeinv();//加载新图片
        }
    })
    function getMinUl() {//每次获取最短的ul,将图片放到其后
        var $arrUl = $("#container .col");
        var $minUl = $arrUl.eq(0);
        $arrUl.each(function(index, elem) {
            if ($(elem).height() < $minUl.height()) {
                $minUl = $(elem);
            }
        });
        return $minUl;
    }
    //点击更多加载
    $("#loadMeinvMOre").click(function() {
        $minUl = getMinUl();
        loadMeinv();
    });
})