js怎么實現無限加載自適應屏幕瀑布流圖片效果

發布時間：2022-03-11 16:47:07 來源：億速云閱讀：319 作者：iii 欄目：web開發

這篇文章主要講解了“js怎么實現無限加載自適應屏幕瀑布流圖片效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“js怎么實現無限加載自適應屏幕瀑布流圖片效果”吧！

<!doctype html>

<html>

<head>

<title>無限加載自適應屏幕瀑布流圖片效果</title>

<!--[if lt IE 9]>

<![endif]-->

拋開瀑布流布局各種亂七八糟的算法，基于masonry的瀑布流，很是簡單的，而且通過擴展animate,能實現瀑布流布局的晃動、彈球等效果。

masonry還有很多參數我這里注解了常用的參數

$(function(){

/*瀑布流開始*/

var container = $('.waterfull ul');

var loading=$('#imloading');

// 初始化loading狀態

loading.data("on",true);

/*判斷瀑布流最大布局寬度，最大為1280*/

function tores(){

var tmpWid=$(window).width();

if(tmpWid>1280){

tmpWid=1280;

}else{

var column=Math.floor(tmpWid/320);

tmpWid=column*320;

}

$('.waterfull').width(tmpWid);

}

tores();

$(window).resize(function(){

tores();

});

container.imagesLoaded(function(){

container.masonry({

columnWidth: 320,

itemSelector : '.item',

isFitWidth: true,//是否根據瀏覽器窗口大小自動適應默認false

isAnimated: true,//是否采用jquery動畫進行重拍版

isRTL:false,//設置布局的排列方式，即：定位磚塊時，是從左向右排列還是從右向左排列。默認值為false，即從左向右

isResizable: true,//是否自動布局默認true

animationOptions: {

duration: 800,

easing: 'easeInOutBack',//如果你引用了jQeasing這里就可以添加對應的動態動畫效果，如果沒引用刪除這行，默認是勻速變化

queue: false//是否隊列，從一點填充瀑布流

}

});

/*模擬從后臺獲取到的數據*/

var sqlJson=[{'title':'瀑布流其實就是幾個函數的事！','intro':'爆料，蘇亞雷斯又咬人啦，C羅哪有內馬爾帥，梅西今年要不奪冠，你就去泰國吧，老子買了阿根廷贏得彩票，輸了就去不成了。','src':'images/one.jpg','writer':'標題','date':'2小時前','looked':321},{'title':'瀑布流其實就是幾個函數的事！','intro':'爆料了，蘇亞雷斯又咬人啦，C羅哪有內馬爾帥，梅西今年要不奪冠，你就去泰國吧，老子買了阿根廷贏得彩票，輸了就去不成了。','src':'images/demo2.jpg','writer':'標題','date':'2小時前','looked':321},{'title':'瀑布流其實就是幾個函數的事！','intro':'爆料了，蘇亞雷斯又咬人啦，C羅哪有內馬爾帥，梅西今年要不奪冠，你就去泰國吧，老子買了阿根廷贏得彩票，輸了就去不成了。','src':'images/p1.jpg','writer':'標題','date':'2小時前','looked':321},{'title':'瀑布流其實就是幾個函數的事！','intro':'爆料了，蘇亞雷斯又咬人啦，C羅哪有內馬爾帥，梅西今年要不奪冠，你就去泰國吧，老子買了阿根廷贏得彩票，輸了就去不成了。','src':'images/p1.jpg','writer':'標題','date':'2小時前','looked':321}];

/*本應該通過ajax從后臺請求過來類似sqljson的數據然后，便利，進行填充，這里我們用sqlJson來模擬一下數據*/

$(window).scroll(function(){

if(!loading.data("on")) return;

// 計算所有瀑布流塊中距離頂部最大，進而在滾動條滾動時，來進行ajax請求，方法很多這里只列舉最簡單一種，最易理解一種

var itemNum=$('#waterfull').find('.item').length;

var itemArr=[];

itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;

itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;

itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;

var maxTop=Math.max.apply(null,itemArr);

if(maxTop<$(window).height()+$(document).scrollTop()){

//加載更多數據

loading.data("on",false).fadeIn(800);

(function(sqlJson){

/*這里會根據后臺返回的數據來判斷是否你進行分頁或者數據加載完畢這里假設大于30就不在加載數據*/

if(itemNum>30){

loading.text('就有這么多了！');

}else{

var html="";

for(var i in sqlJson){

html+="<li class='item'><a href='#' class='a-img'><img src='"+sqlJson[i].src+"'></a>";

html+="<h3 class='li-title'>"+sqlJson[i].title+"</h3>";

html+="<p class='description'>"+sqlJson[i].intro+"</p><div class='qianm clearfloat'>";

html+="<span class='sp1'><b>"+sqlJson[i].looked+"</b>瀏覽</span>";

html+="<span class='sp2'>"+sqlJson[i].writer+"</span><span class='sp3'>"+sqlJson[i].date+" By</span></div></li>";

}

/*模擬ajax請求數據時延時800毫秒*/

var time=setTimeout(function(){

$(html).find('img').each(function(index){

loadImage($(this).attr('src'));

})

var $newElems = $(html).css({ opacity: 0}).appendTo(container);

$newElems.imagesLoaded(function(){

$newElems.animate({ opacity: 1},800);

container.masonry( 'appended', $newElems,true);

loading.data("on",true).fadeOut();

clearTimeout(time);

});

},800)

}

})(sqlJson);

}

});

function loadImage(url) {

var img = new Image();

//創建一個Image對象，實現圖片的預下載

img.src = url;

if (img.complete) {

return img.src;

}

img.onload = function () {

return img.src;

};

loadImage('images/one.jpg');

/*item hover效果*/

var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];

$('#waterfull').on('mouseover','.item',function(){

var random=Math.floor(Math.random() * 4);

$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);

});

$('#waterfull').on('mouseout','.item',function(){

$(this).stop(true).animate({'backgroundColor':'#fff'},1000);

});

})

</script>

</head>

<body>

<ul>

</a>