瀑布流实现

瀑布流实现

---

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>

---

结果