如题 ,请各位大佬指点一下
;;(function(){
if(typeof jQuery === "function"){
(function( factory , $ ){
if($.fn.jquery.split(".")[0] >= 1){
factory( $ )
}
})(function( $ ){
$.waterFall = function( options ){
var _default = {
delay : 100,
advance_load : 500,
start : 0,
col : 4,
interval : 20
}
options = $.extend( _default , options );
$(function(){
function init(){
init.height_list = [];
init.start = options.start;
init.eles_length = 0;
$(document).scrollTop(0);
bindEvent()
};
function bindEvent(){
loadPic(init.start)
$(document).on("scroll" , throttle(function(){
if(!init.loading){
init.fire_height = $(document).scrollTop() + document.documentElement.clientHeight;
if(init.fire_height > Math.min.apply(false , init.height_list) - options.advance_load ){
init.loading = true;
loadPic(init.start)
}
}
} , options.delay))
};
function loadPic( start ){
var in_options = {
url : options.ajax_options.url ,
data : options.ajax_options.data
}
in_options.data[options.sendstart_name] = start ,
in_options["_"] = Date.now()
$.ajax( in_options ).then(function(res){
render(res)
init.start = eval("res." + options.next_start);
init.loading = false;
})
};
function render( res ){
var html = "";
var deg = /@/g
options.html = options.html.replace(deg , "")
for(var i = 0 ; i < res.data.object_list.length ; i ++){
html += eval("`" + options.html + "`")
}
$(options.container).append(html);
if(init.height_list.length === 0){
firstRender( options.col )
continueRender( options.col )
}else{
continueRender( init.eles_length )
}
}
function firstRender( num ){
for(var i = 0 ; i < num ; i ++){
init.height_list.push($(".box").eq(i).outerHeight() + $(".box").eq(i).position().top);
}
}
function continueRender( num ){
init.eles_length = $(".box").length;
for(var i = num ; i < $(".box").length ; i++){
var min = Math.min.apply(false , init.height_list)
var min_index = init.height_list.indexOf(min);
$(".box").eq(i).css({
left : min_index * options.pic_options.wd_num,
top : min + options.interval ,
position : "absolute"
})
init.height_list[min_index] = init.height_list[min_index] + $(".box").eq(i).outerHeight() + options.interval
}
}
function throttle( callback , delay ){
delay = delay || 100;
var t = null ;
var _arguments = [];
for(var i = 2 ; i < arguments.length ; i++){
_arguments.push( arguments[i] );
}
return function(){
if( typeof t === "number" ){
return false;
}
t = setTimeout(function(){
t = null ;
callback.apply( false , _arguments);
} , delay)
}
};
function judge_error(){
var err = options.ajax_options ? null : "缺少参数ajax_options";
throw_error( err );
err = options.ajax_options.url ? null : "缺少参数ajax_options.url";
throw_error( err );
err = options.ajax_options.data ? null : "缺少参数ajax_options.data";
throw_error( err );
err = options.pic_options ? null : "缺少参数pic_options";
throw_error( err );
err = options.pic_options.ele ? null : "缺少参数pic_options.ele";
throw_error( err );
err = options.pic_options.wd_num ? null : "缺少参数pic_options.wd_num";
throw_error( err );
err = options.pic_options.width ? null : "缺少参数pic_options.width";
throw_error( err );
err = options.html ? null : "缺少参数html";
throw_error( err );
err = options.next_start ? null : "缺少参数next_start";
throw_error( err );
err = options.sendstart_name ? null : "缺少参数sendstart_name";
throw_error( err );
err = options.container ? null : "缺少参数container";
throw_error( err );
};
function throw_error( err ){
if(err){
throw err;
}
}
judge_error()
init()
})
}
} , jQuery)
}else{
throw "未检测到jQuery , 请先插入jQuery"
}
})();
# 瀑布流
## 提供函数
- $.waterFall()
## 参数
### 必填参数
- ajax_options
>请求后端数据的需要的参数 ;请确保提供的ajax参数正确
- url
>请使用更改服务端之后的url
- data
- pic_options
>图片信息
- wd_num
>每个图片所在容器的宽度 , 包含margin
- ele
>所需要渲染的元素信息列表的位置
- sendstart_name
>ajax的data请求中开始位置的键名
- next_start
>下次请求开始的位置
- html
>渲染的字符串 ;
- 渲染时请使用ES6的反引号``来编写字符串
- 变量用`$@{ 变量}`来写 ;
- 注意渲染图片时,必须直接添加高度信息 , 因为宽度信息是确定的, 所以缩放比例也就确定了 , 缩放比例再乘以原高度就等于所渲染高度;
- res为获取到的后端数据
- 因为所需要渲染的元素信息列表的位置已给定 , 所以元素信息列表的位置+ `[i]` 表示每个需要渲染的元素信息
- container
>渲染到哪个容器
### 可选配置参数
- delay
>函数节流的间隔毫秒数,默认为100
- advance_load
>滚动条到最后图片上方的距离 默认500
- col
>渲染成几列
- interval
>每行之间的空隔 ; 默认为20;
- start
>从第哪张图片开始 ;默认为0;ajax的data请求中开始位置的键值