jquery瀑布流佈局和鼠標滾動加載

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個

　　　　　　]}

　　　　　　//當滾動鼠標時

　　　　　　window.onscroll = function(){　　　

　　　　　　　　//判斷是否能夠滾動加載

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

　　　　　　　　　　$.each(dataImg.data,function(index,value){　　遍歷dataImg的data數據,和動態建立盒子對象的函數,

　　　　　　　　　　　　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();　　//動態加載後讓圖片從新按瀑布流排列

　　　　　　　　}

　　　　　　}　

　　　　　　imgLoad();　　//調用函數

　　　　})

　　　　//建立一個鼠標滾動加載盒子的函數，加載原理：鼠標滾動到最後一張圖的高度的一半時就加載更多的圖片

　　　　function scrollLoad(){

　　　　　　var box = $('.box');

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

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

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

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

　　　　　　//當最後一張圖的高度 < 當前文檔的高度 + 鼠標滾動的高度 則能夠繼續滾動鼠標加載  不然不加載

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

　　　　}

　　　　//建立一個瀑布流佈局的函數

　　　　function imgLoad(){

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

　　　　　　var boxWidth = box.eq(0).width();　　　　　　　　　　　//計算box的寬度(由於每一個都同樣，因此獲取第一個)

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

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

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

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

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

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

　　　　　　　　}else{　　　　　　　　　　　　　　　　　　　　　　//

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

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

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

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

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

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

　　　　　　　　　　});

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

　　　　　　　　　　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>
　　<!-- 重複多些box -->
</div>