瀑布流js加载数据（直接用哦）

直接上代码

html中：

<div class="zjbox">
    <ul id="videoList">
     
    </ul>
</div

js中修改数据、路径及排版就行：

 

<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>

<script type="text/javascript">
   $(document.body).ready(function(){
       $(".record_list").RollTitle({line:1,speed:2000,timespan:1});
   });
    var page=1;
    var total_page = 0;
    var pagesize=10;
    var inp ="";
    $(window).scroll(function(){
        var dy = $(document).height();
        var sy = $(window).scrollTop();
        var wy = $(window).height();
        if (dy - wy - sy == 0) {
            if(page > total_page){
                layer.msg('已经到底啦!',{icon:7,time:2000});
                return;
            }
            list('l');
        }
    });


    function list(s){
        var vindex = layer.load(1, {shade: [0.1, '#DCDCDC']});
        inp = $(":text").val();
        if(s=='l'){
            var data={"pagesize":20,"pageno":page,"keyword":inp};
        }else{
            var data={"pagesize":20,"pageno":1,"keyword":inp};
        }

        console.log(data);
        $.ajax({
            type: "get",
            url: "/weisufuv2/V2kai/tingshenshipindata",
            data:data,
            dataType:"json",
            success: function(data){
console.log(data);
                if(data.err_no<=0){
                    var str ="";
                    var vedioList = data.data;
                    console.log(vedioList);
                    for(var i = 0;i < vedioList.length;i++){
                        str +='<li>'
                            +'<a href="javascript:;">'
                            +'<div class="imgbox">'
                            +'<video class="video_box" src="'+vedioList[i].picurl+'" poster="'+vedioList[i].picurl+'"></video>'
                            // +'<span class="marktime">'+vedioList[i].marktime+'</span>'
                            +'</div>'
                            +'<div class="imgrinfor" data-id="'+vedioList[i].tsfdBh+'" data-fyid="'+vedioList[i].fyBh+'">'
                            +'<h2 class="ellips">'+vedioList[i].ajName+'</h2>'
                            +'<h3 class="ellips">'+vedioList[i].bgFtName+'</h3>'
                            +'<div class="dibox">'
                            +'<i class="bigi"><img src="/weisufuv2/images/z_png2.png"></i>'
                            +'<span class="timespan">'+vedioList[i].kssj+'</span>'
                            +'<span href="javascript:;" class="bfl">'
                            +'<i class="smai"><img src="/weisufuv2/images/z_png3.png"> </i>'
                            // +'<font>'+vedioList[i].playTimes+'</font>'
                            +'</span>'
                            +'</div>'
                            +'</div>'
                            +'</a>'
                            +'</li>';
                    }
                    if(s=='l'){$("#videoList").append(str);}else{$("#videoList").html(str);}

                    // $("#videoList").html(str);
                    total_page = Math.ceil(vedioList.count/pagesize);
                    page ++;
                    layer.close(vindex);
                    var $divs=$(".imgrinfor");
                    for(var i=0;i<$divs.length;i++){
                        $divs[i].onclick=function(){
                            var did = $(this).attr("data-id");
                            var fyid = $(this).attr("data-fyid");

                            window.location.href = "/weisufuv2/v2sifagongkai/tingshenshipindetail?did="+did+"&fyid="+fyid;
                        }
                    }

                }else{
                    layer.close(vindex);
                    layer.msg(data.message,{icon:7,time:2000});
                }

            }

        });
    }
   $(function(){
        list('l');
})



//此处js不需修改，直接引用

(function($){
  $.fn.extend({
    RollTitle: function(opt){
      if(!opt) var opt={};
      var _this = this;
      _this.timer = null;
      _this.lineH = _this.find("li:first").width();
      console.log(_this);
      _this.line=opt.line?parseInt(opt.line,15):parseInt(_this.width()/_this.lineH,10);
      _this.speed=opt.speed,
      _this.timespan=opt.timespan;
      if(_this.line==0) this.line=1;
    
 
      _this.scrollUp=function(){
        _this.animate({
          marginTop:0
        },_this.speed,function(){
          for(i=1;i<=_this.line;i++){
            _this.find("li:first").appendTo(_this);
          }
          _this.css({marginTop:0});
        });
      }
      _this.hover(function(){
        clearInterval(_this.timer);
      },function(){
        _this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);
      }).mouseout();
    }
  })
})(jQuery);

</script>