为了账号安全,请及时绑定邮箱和手机立即绑定

jq+oopp+瀑布流插件,逼格很高的瀑布(有终止、自适应宽度)

$(function () {
var _pubuliu = new pubuliu("josn/waterfallimgs.json",22,"#main",".box");
});
function pubuliu (jsonUrl,num,big,minBox){
var that = this ;
//json数据
this.dateInt = null;
//json路径
this.JsonUrl = jsonUrl;
//预加载个数
this.num = num ;
//添加位置
this.big = $(big);
//小盒子
this.minBox = null;
this.kkk = 0;
//读取json
this.getJson = function () {
$.post(that.JsonUrl, function (data) {
that.dateInt = data ;
that.preload();
that.waterfall();
$(window).scroll(function (){
if(that.checkScrollSlide()){
that.preload();
that.waterfall();
}
})
},"json");
};
//预加载
this.preload = function(){
for (var i = that.kkk ; i < that.num ;i++){
if(that.dateInt[0].data[i]==null){
continue;
}
var hT =
'<div class="box" >'+
'<div class="pic">'+
'<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/'+that.dateInt[0].data[i].src+'">'+
'</div>'+
'</div>';
that.big.append(hT);
}
that.kkk =that.num;
that.num +=that.num;
that.minBox = $(minBox);
};
//排序方式!!!!!!!!
this.waterfall= function(){
// 计算整个页面的列数(页面宽/box的宽度)
var oBoxW =that.minBox.eq(0).width();
var cols = Math.floor($(window).width()/oBoxW) ;
// 设置main宽度 对齐方式
that.big.css({
"width":oBoxWcols+'px;margin:0 auto;'
});
var hArr = [];
for(var i = 0 ;i<that.minBox.length;i++){
if(i<cols){
hArr.push(that.minBox.eq(i).height());
}
else{
var minH = Math.min.apply(null,hArr);
var index = that.getMinhIndex(hArr,minH);
that.minBox.eq(i).css(
{
"position":"absolute",
"top":minH + 'px',
"left":oBoxW
index + 'px',
"left":that.minBox.eq(index).offset().left+'px'
}
);
hArr[index] += that.minBox.eq(i).height();
}
}
};
this.getMinhIndex = function (arr,val){

    for(var i in arr ){
        if(arr[i]==val){
            return i;
        }
    }
};
////检测是否满足加载数据块体条件
this.checkScrollSlide =  function(){
    var lastBoxH = that.minBox.eq(that.minBox.length-1).offset().top + Math.floor(that.minBox.eq(that.minBox.length-1).height()/2);
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();
    return (lastBoxH<scrollTop+height) ? true : false;
};
this.getJson()

}


点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消