布局
HTML代碼如下：
<div class="container">
<div class="box">
<div class="content">
</div>
</div>
<div class="box">
<div class="content">
</div>
</div>
</div>
CSS代碼如下：
*{
padding: 0;
margin: 0px;
}
.box{
position: relative;
float: left;
}
.content{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 5 #ccc;
border-radius: 5px;
}
.content img{
width: 190px;
height: auto;
}
圖片位置的排放
思路如下：
- 確定每排能夠放的圖片個(gè)數(shù)
- 取得每張圖片的高度
- 取得最小的高度
- 確定圖片的位置
- 進(jìn)行排放
學(xué)習(xí)的點(diǎn)： - var minH = Math.min.apply(null,colH);
apply() 的作用是改變執(zhí)行的執(zhí)行環(huán)境。
就是說數(shù)組 colH 沒有min這個(gè)方法豪直，但是Math對象可以求最小值劣摇，有min這個(gè)方法
例如 var a = Math.min(3,2,1,4)末融，那么a將賦值為1
colH想使用Math對象的min方法钧惧，就需要使用call/apply來改變執(zhí)行環(huán)境了滑潘。
Math.min(3,2,1,4)等價(jià)于 Math.min.apply(null, [3,2,1,4])，null是上下文说莫，傳入的對象對應(yīng)函數(shù)中的this，min函數(shù)并沒有使用this，因此這里可以為null伞梯，[3,2,1,4]是給min函數(shù)的參數(shù)列表睡陪。 - $.isArray()函數(shù)用于判斷指定參數(shù)是否是一個(gè)數(shù)組。
- $.inArray()方法類似于JavaScript的原生.indexOf()方法历涝，沒有找到匹配元素時(shí)它返回-1。如果數(shù)組第一個(gè)元素匹配value（參數(shù)） 荧库，那么$.inArray()返回0堰塌。
- jquery.inarray(value,array)
確定第一個(gè)參數(shù)在數(shù)組中的位置(如果沒有找到則返回 -1 )场刑。 - $(window).height() //是獲取當(dāng)前 也就是你瀏覽器所能看到的頁面的那部分的高度 這個(gè)大小在你縮放瀏覽器窗口大小時(shí) 會改變與document是不一樣的 根據(jù)英文應(yīng)該也能理解吧
- Math.floor()//小于等于 x，且與 x 最接近的整數(shù)蚪战。向下取整
具體的代碼如下所示：
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
});
})
function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index]=boxHeight;
}else{
var minboxHeight = Math.min.apply(null,boxArr);
var minboxIndex = $.inArray(minboxHeight,boxArr);
$(value).css({
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).height();
}
});
}
滾動(dòng)加載
實(shí)現(xiàn)思路：
- 判斷——當(dāng)前容器的高度+滾動(dòng)距離>最后一張圖片的高度的一半
var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight = $(document).width();
var scrollHeight = $(window).scrollTop();
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
- 如果上敘為真，則加載數(shù)據(jù)瞎疼，這里涉及到JSON的知識
- 這里用到的是json的知識，也就動(dòng)態(tài)的獲取數(shù)據(jù)
var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"1.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
全部代碼如下：
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"1.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
window.onscroll = function(){
if(scrollside()){
$.each(dataImg.data,function(index,value){
var box = $("<div>").addClass("box").appendTo($("#container"));
var content = $("<div>").addClass("content").appendTo(box);
console.log("images/"+$(value).attr("src"));
$("<img>").attr("src","images/"+$(value).attr("src")).appendTo(content);
});
imgLocation();
}
};
});
})
function scrollside(){
var box = $(".box");
var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight = $(document).width();
var scrollHeight = $(window).scrollTop();
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}
function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index]=boxHeight;
}else{
var minboxHeight = Math.min.apply(null,boxArr);
var minboxIndex = $.inArray(minboxHeight,boxArr);
$(value).css({
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).height();
}
});
}
還是有bug,最后沒辦法加載出來贼急，生無可戀の
