瀑布流实现

---

json数据样式

{  "data": [    {      "0": "加勒比海盗3：世界的尽头",      "1": "Pirates of the Caribbean: At World's End",      "2": "奇幻，动作",      "3": "9",      "4": "2007",      "5": "2",      "6": "1",      "7": "2015-05-24 06:00:05",      "name": "加勒比海盗3：世界的尽头",      "name_en": "Pirates of the Caribbean: At World's End",      "type": "奇幻，动作",      "star": "9",      "premiere": "2007",      "extends": "2",      "foreign": "1",      "watch_time": "2015-05-24 06:00:05"    },    {      "0": "加勒比海盗4：惊涛怪浪",      "1": "Pirates of the Caribbean: On Stranger Tides",      "2": "奇幻，动作",      "3": "8",      "4": "2011",      "5": "4",      "6": "1",      "7": "2015-05-24 06:00:22",      "name": "加勒比海盗4：惊涛怪浪",      "name_en": "Pirates of the Caribbean: On Stranger Tides",      "type": "奇幻，动作",      "star": "8",      "premiere": "2011",      "extends": "4",      "foreign": "1",      "watch_time": "2015-05-24 06:00:22"    }  ],  "flag": [    true  ]}

<script>    var index = 1;    var id = 1;    $(window).on('load',function(){        InsertData(GetData(index));//初始化加载数据        $(window).on('scroll',function(){ //滚动时            if(IsScrolling()){                var data = GetData(index);                if(data.flag){                    InsertData(GetData(index));                }else{                    $('#load_more').html('-- End --');                    $(window).off('scroll'); //没有数据后去除滚动事件                }            }        });    });    //把解析的json数据加载到页面中    function InsertData(obj){        $.each(obj.data, function (obj_id,temp) {            if(temp.name_en==null){ temp.name_en = ''}            var node = '<a id="film'+id+'" class="list-group-item film">\                           <span>'+temp.name+'</span><small class="film-enname"> '+temp.name_en+'</small><span class="pull-right hidden-xs film-star">'+StarRank(temp.star)+'</span>\                        </a>';            $('#film-list').append(node);            $('#film'+id).css({                'opacity':0.1,                'margin-top':'20px'            });            $('#film'+id).animate({               "opacity":1,                "margin-top":0            },750);            id++;            $('#load_more').html('<span class="glyphicon glyphicon-refresh"></span> 载入中...');//            echo('第'+index+'次加载数据'); //调试用        });        index++;        $('.list-group-item').click(function(){            $('.list-group-item').removeClass('list-group-item-warning');            $(this).addClass('list-group-item-warning');        })    }    //从服务器获取数据    function GetData(page){        var data;        $.ajax({            type:"GET",            url: "film.php?page="+page,            dataType: 'json',            async:false,             //异步加载数据以实现返回结果            //如果把判断和动画加到这里，不会有效果而且会在滚动窗口的时候多次触发 IsScrolling()            success: function(json) {                data = json;            },            error:function(){                $('#load_more').html('加载失败');            }        });        return data;    }    //判断是否可以加载数据    function IsScrolling(){        var offset_top = $('#load_more').offset().top;        var win_hegiht = $(window).height();        var body_scroll = $('body').scrollTop();        return offset_top<win_hegiht+body_scroll;    }    function StarRank(star_count){        var star='<span class="pull-right hidden-xs film-star">';        while(star_count>0){            star+='✿';            star_count--;        }        star+='</span>';        return star;    }    function echo(str){        console.log(str);    }</script>

---

结果