开发者学堂课程【jQuery 开发教程：jQuery_瀑布流2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4317
jQuery_瀑布流2
一、瀑布流
通过不断调用 imglocation 方法可以在该数组中最小的那个图片，并在下方添加下一个图片
1. 将图片摆放到最小高度下
function Imglocation(){
var box=$(".pin");//返回一个数组
var boxWidth=box.eq(0) .width();//每张图片的宽度
var num=Math. floor ($ (window) . width()/boxWidth);//-行能摆放图片的个数
var numArr=[];
box . each( function(index,yalue) {
var boxHei ght=box . eq(index) . height();//获取每张图片的高度
if(index一排
numArr [index] =boxHeight;
}else{//第二排
var minboxHeight=Math . min. apply (numArr ,numArr);
//console. log(minboxHeight);
//jQuery. inArray(value,数组，数组的索引值日)
var minIndex=$. inArray (minboxHei ght ,numArr);//最小高度图片的素引值
//console. log (minIndex);
$(value).css({
position: "absolute",
top: minboxHeight,
left:box. eq (minIndex) .position().left
});
numArr [minIndex] +=box.eq(index). height();//新高度
})
2. 创建一个对象承载图片
$ (document) .ready(function(){
$ (window) . on("load", function(){//图片加载完成之后再显示
imgLocation() ;
var dataImg={"data":[{"src":"i1.jpg"},{"src":"i2.jpg"}]};
$ (window) . scroll( function(){
//
if(getSideHeight()){
$. each(dataImg . data, function (index,value){
var pin=$ ("
") .addClass ("pin") .appendTo("#main");
var box=$ ("
") . addClass ("box") . appendTo(pin) ;
var img=$("
").attr ("src", "images/"+$ (value) .attr ("src")) . appendTo(box);
});获取最后一张图片距离项端的高度-他自身的一半
imgLocation();
})
});
3. 定义一个方法获取边缘的高度
function getsideHeight(){
var box=$ (".pin");
var lastImgHeight= (box. last().get(0)).offsetTop-Math. floor (box. last() .height()/2);
var documentHeight=$ (document).height();//获取当前窗口的一个高度
var scrollHeight=$ (window) .scrollTop();//获取滚动的距离
return (lastImgHei ght
4. 动态创造标签并且添加图片
获取最后一张图片距离项端的高度-他自身的一半
if(getsideHeight()) {
$. each(dataImg . data, function (index ,value) {
var pin=$ ("
") . addClass ("pin") . appendTo("#main") ;
var box=$ ("
").addClass ("box") . appendTo(pin);
var img=$("") .attr("src", "images/"+$ (yalue) .attr ("src")) .appendTo(box);
});
imglocation() ;
5. 最终运行结果：
