首先,还是来看一下炫酷的页面:

jquery瀑布流的制作-LMLPHP今天就边做边说了:

一。准备工作

新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述了。

二。图片展示

<div id="main">
<div class="pic">
<img src="img/1.jpg" />
</div> <div class="pic">
<img src="img/2.jpg" />
</div> <div class="pic">
<img src="img/3.jpg" />
</div> <div class="pic">
<img src="img/4.jpg" />
</div> <div class="pic">
<img src="img/5.jpg" />
</div> <div class="pic">
<img src="img/6.jpg" />
</div> <div class="pic">
<img src="img/7.jpg" />
</div> <div class="pic">
<img src="img/8.jpg" />
</div> <div class="pic">
<img src="img/9.jpg" />
</div> <div class="pic">
<img src="img/10.jpg" />
</div> <div class="pic">
<img src="img/1.jpg" />
</div> <div class="pic">
<img src="img/2.jpg" />
</div> <div class="pic">
<img src="img/3.jpg" />
</div> <div class="pic">
<img src="img/4.jpg" />
</div>
<div class="pic">
<img src="img/5.jpg" />
</div> <div class="pic">
<img src="img/6.jpg" />
</div> <div class="pic">
<img src="img/7.jpg" />
</div>
</div>

一个大div包裹全局,小的div包裹图片,这里为什么要这么多图片呢,是因为刚开始的时候图片要占满屏幕,否则会不美观。而且jq中用的是监听滚动条的方法加载图片,图片太少的话滚动条都不会出现,自然不能执行滚动条的事件。

分析一下图片的显示效果:

1.图片有白色的边框,阴影

2.图片是平铺的

*{
padding:;
margin:;
}
#main{
position:relative;
}
#main .pic{
width:170px;
box-shadow: 0 0 6px #CCCCCC;
float:left;
margin:5px;
}
#main .pic img{
width:160px;
height:auto;
border: 5px #FFFFFF solid;
}

相信上面的代码是很好理解的,到此为止图片已经平铺了。

三。让图片顺序依次排列

虽然执行完上面的代码以后图片是平铺了,但效果却是很不好的,它没有像图片展示的那样高低排列。

如何实现高低排列:

1.第一行肯定是没有问题的,因为第一行的每张图上面没有图片,也就是说是平的;

2.第二行就可以取第一行中高度最小的图片,然后把第二行的第一张图片放在下面(这里用绝对定位控制图片位置);

3.以此类推,把第二行第一张图片插入以后,在选择这时候第一行中最短的,并把图片放在下面。

function waterFall(){
var divWidth = $("#main .pic").eq(0).width()+10; //获取页面中包裹图片的div宽度,这里的+10是因为在css中设置的margin是5px,左右加起来就是10(相当于这个div的实际宽度比预设多10px)
var num = Math.floor($(window).width()/divWidth); // Math.floor是向下取整,获取整个浏览器的宽度除以"图片的占宽"可以获得图片可以排放多少列,这也就是向下取整的原因了 $("#main").css({ //设置整个div的宽度,并让其居中显示
"width":divWidth*num,
"margin": "0 auto"
});
var picArr = []; //定义一个数组
$("#main .pic").each(function(index){ //遍历所有.pic的div
var picHeight = $("#main .pic").eq(index).height();//获取每个div的高度
if(index<num){ //如果是第一行
picArr[index] = picHeight;//把高度存储进数组
}else{ //如果数组不是第一行的数据了
var minH = Math.min.apply(null,picArr); //获取数组中最小的高度
var minIndex = $.inArray(minH,picArr); //获取最小高度的index(位置)
$(this).css({ //设置这个div的位置
"position":"absolute",
"top":minH+10, //设置它距离上方的距离,这里加10是因为在css中设置的margin是5px,上下加起来是10px
"left":$("#main .pic").eq(minIndex).position().left //获取最小高度距离左边的距离
});
picArr[minIndex]+=$("#main .pic").eq(index).height()+10; //把最小的高度存入数组中
}
});
}

在页面加载完后执行waterFall()方法,这个句子就不写啦。到此为止就可以看到图片依次有序排列啦

四。瀑布流的实现

思路:这里是监听浏览器的滚动条,当滚动条到达底部时就加载预定数组中的图片

$(window).on("load",function(){
waterFall();
var pics = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
window.onscroll = function(){
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
$.each(pics,function(index,value){
$(".pic").eq(0).clone().appendTo("#main").find("img").attr("src","img/"+value);
});
waterFall();
}
}
});

appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

当然这里是当浏览器的滚动条到达底部的时候才会加载图片,如果觉得这样用户体验不好的话,可以在if里面设置,例如:if ($(document).scrollTop()+100 >= $(document).height() - $(window).height())

05-01 07:29