jquery部分：

//引入JQ庫（版本不同會有差別）
<script src="https://cdn.bootcss.com.jquery/2.1.1/jquery.min.js"></script>

<script>

　　$(document).ready(function(){

　　　　$(window).on('load',function(){

　　　　　　var dataImg = {'data':[

　　　　　　　　{'src':'1.jpg'},

　　　　　　　　{'src':'2.jpg'},

　　　　　　　　{'src':'3.jpg'},

　　　　　　　　{'src':'4.jpg'},

　　　　　　　　{'src':'5.jpg'},

　　　　　　　　{'src':'6.jpg'},

　　　　　　　　//省略N個

　　　　　　]}

　　　　　　//當(dāng)滾動鼠標(biāo)時

　　　　　　window.onscroll = function(){　　　

　　　　　　　　//判斷是否可以滾動加載

　　　　　　　　if(scrollLoad()){　　//滿足滾動加載

　　　　　　　　　　$.each(dataImg.data,function(index,value){　　遍歷dataImg的data數(shù)據(jù),和動態(tài)創(chuàng)建盒子對象的函數(shù),

　　　　　　　　　　　　var box = $('<div>').addClass('box').appendTo('#container');

　　　　　　　　　　　　var content = $('<div>').addClass('content').appendTo(box);

　　　　　　　　　　　　//console.log('src','./images/' + $(value).attr('src'));　　//打印每張圖片的鏈接地址

　　　　　　　　　　　　$('<img>').attr('src','./images/' + $(value).attr('src')).appendTo(content);　　

　　　　　　　　　　})

　　　　　　　　　　imgLoad();　　//動態(tài)加載后讓圖片重新按瀑布流排列

　　　　　　　　}

　　　　　　}　

　　　　　　imgLoad();　　//調(diào)用函數(shù)

　　　　})

　　　　//創(chuàng)建一個鼠標(biāo)滾動加載盒子的函數(shù)，加載原理：鼠標(biāo)滾動到最后一張圖的高度的一半時就加載更多的圖片

　　　　function scrollLoad(){

　　　　　　var box = $('.box');

　　　　　　//獲取最后一張圖的高度 = 最后一第圖的offsetTop值 + 最后圖片的高度的一半

　　　　　　var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height/2);　　

　　　　　　var documentHeight = $(document).width();　　　　　　　//獲取當(dāng)前文檔的高度

　　　　　　var scrollHeight = $(window).scrollTop();　　　　　　　　　//獲取鼠標(biāo)滾動的高度

　　　　　　//當(dāng)最后一張圖的高度 < 當(dāng)前文檔的高度?+?鼠標(biāo)滾動的高度 則可以繼續(xù)滾動鼠標(biāo)加載 ?否則不加載

　　　　　　return (lastboxHeight < documentHeight + scrollHeight)?true:false;

　　　　}

　　　　//創(chuàng)建一個瀑布流布局的函數(shù)

　　　　function imgLoad(){

　　　　　　var box = $('.box');　　　　　　　　　　　　　　　　　　　//定義變量方便獲取

　　　　　　var boxWidth = box.eq(0).width();　　　　　　　　　　　//計算box的寬度(因為每個都一樣，所以獲取第一個)

　　　　　　var num = Math.floor($(window).width()/boxWidth);　　//計算每一排的盒子個數(shù)(用窗口寬除以一個盒子的寬 = 盒子的個數(shù))

　　　　　　var boxArr = []　　　　　　　　　　　　　　　　　　　　　//定義一個數(shù)組存放每排的盒子的高度

　　　　　　box.each(function(index,value){　　　　　　　　　　　　//遍歷盒子的元素 以index為盒子的位置--value為盒子對象為參數(shù)傳進來

　　　　　　　　var boxHeight = box.eq(index).height();　　　　　　//計算出每個盒子的高度

　　　　　　　　if(index < num){　　　//index < num (num是每一排的盒子個數(shù),index < num 就是指一排的盒子 在這里就是指第一排的盒子)

　　　　　　　　　　boxArr[index] = boxHeight;　　　　　　　　//數(shù)組存放的是每個盒子的高度 => 數(shù)組元素的索引就是每個盒子的高度

　　　　　　　　}else{　　　　　　　　　　　　　　　　　　　　　　//

　　　　　　　　　　var minboxHeight = Math.min.apply(null,boxArr);　　//獲取高度最小的盒子

　　　　　　　　　　var minboxIndex = $.inArray(minboxHeight,boxArr);　　//計算高度最小的盒子的位置

　　　　　　　　　　$(value).css({　　　　　　　　　　　　　　　　　　　　　　//重新設(shè)置每個盒子對象的css，都是以每列最小高度排列

　　　　　　　　　　　　'position':'absolute',　　　　　　　　　　　　　　　　//給第一排后每個盒子重新定位

　　　　　　　　　　　　'top':minboxHeihgt + 10,　　　　　　　　　　　　　　//top值為最小高度盒子的top值再+10px（+10px讓盒子的空隙）

　　　　　　　　　　　　'left':box.eq(minboxIndex).position().left;　　　　　//left值為最小高度盒子的left值

　　　　　　　　　　});

　　　　　　　　　　//為使每個盒子不重疊，每當(dāng)排完一行時就重新計算每一排的最小高度的盒子 =>方法：讓排好的盒子計算當(dāng)前列的高度進行排列

　　　　　　　　　　boxArr[minboxIndex] += box.eq(index).height() + 10;　　//最后加10是讓第一排之后的盒子上下有間隙為10px

　　　　　　　　}

　　　　　　});

　　　　};

　　});

</script>

css部分：

*{ padding: 0; margin: 0;}
#container{ width: 90%; margin: 0 auto;}
.box{ position: relative; float: left; margin-left: 5px; margin-right: 5px; }
.content{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 2px #ccc;}
.content img{ width: 210px; height: auto;}
.content h4{ font-size: 14px; color: #777； margin: 5px 0;}

html部分：

<div id="container">
　　<div class="box">
　　　　<div class="content">
　　　　　　<img src="images/1.jpg" alt="">
　　　　　　<h4>This is a pic title</h4>
　　　　</div>
　　</div>
　　<div class="box">
　　　　<div class="content">
　　　　　　<img src="images/1.jpg" alt="">
　　　　　　<h4>This is a pic title</h4>
　　　　</div>
　　</div>
　　<div class="box">
　　　　<div class="content">
　　　　　　<img src="images/1.jpg" alt="">
　　　　　　<h4>This is a pic title</h4>
　　　　</div>
　　</div>
　　<div class="box">
　　　　<div class="content">
　　　　　　<img src="images/1.jpg" alt="">
　　　　　　<h4>This is a pic title</h4>
　　　　</div>
　　</div>
　　<!-- 重復(fù)多些box -->
</div>

?

轉(zhuǎn)載于:https://www.cnblogs.com/wrupei/p/6934373.html

總結(jié)

以上是生活随笔為你收集整理的jquery瀑布流布局和鼠标滚动加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。