//獲取每列高度最小的索引值
function getMinIndex(arr,value){
for(var i in arr){
if(arr[i] == value){
return i;
}
}
}6、根據(jù)最后一張圖片的位置確定是否繼續(xù)加載圖片（懶加載）
假設(shè)是后臺給的數(shù)據(jù)
//數(shù)據(jù)
var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; 當(dāng)滾動條滾動時執(zhí)行
//滾動條滾動時
window.onscroll = function(){
scrollSlide(dataInt);
} 根據(jù)最后一張圖片的位置，來判斷是否進(jìn)行加載
//判斷是否具有了滾條加載數(shù)據(jù)塊的條件
function checkScrollSlide(parent,clsname){
var oParent = document.getElementById(parent);
var oBox = getByClass(oParent,clsname);
var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = document.documentElement.clientHeight || document.body.clientHeight;
return (lastBoxH < scrollTop + height)? true:false;
}加載圖片
//滾動條滾動時執(zhí)行
function scrollSlide(dataInt){
////判斷是否具有了滾條加載數(shù)據(jù)塊的條件
if(checkScrollSlide('main','box')){
var oParent = document.getElementById('main');
//將數(shù)據(jù)塊渲染到當(dāng)前頁面的尾部
for(var i=0;i用jQurey實(shí)現(xiàn)
用jQuery實(shí)現(xiàn)的思路都是一樣的，就直接放代碼
$(window).on('load',function(){
waterfall();
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
$(window).on('scroll',function(){
scrollSlide(dataInt);
})
});
function waterfall(){
var $oBox = $('#main>div');
var oBoxW = $oBox.eq(0).outerWidth();
var cols = Math.floor($(window).width()/oBoxW);
$('#main').css({
'width' : cols * oBoxW,
'margin' : '0 auto'
});
var hArr = [];
$oBox.each(function(index,value){
var oBoxH = $oBox.eq(index).height();
if(indexdiv').last();
var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);
var scrollTop = $(window).scrollTop();
var clientH = $(window).height();
return (lastBoxH < scrollTop + clientH) ? true : false;
}
function scrollSlide(dataInt){
if(checkScrollSlide()){
$.each(dataInt.data,function(index,value){
var $Box = $('').addClass('box').appendTo('#main');
var $Pic = $('
').addClass('pic').appendTo($Box);
$('
![]()
').attr('src','images/' + $(value).attr('src')).appendTo($Pic);
})
waterfall();
}
}
感謝各位的閱讀！關(guān)于“如何使用JavaScript和jQuery實(shí)現(xiàn)瀑布流”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
名稱欄目：如何使用JavaScript和jQuery實(shí)現(xiàn)瀑布流
文章出自：
http://weahome.cn/article/pdocje.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
