你的位置:首页 > Java教程

[Java教程]jquery瀑布流的制作


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

今天就边做边说了:

一。准备工作

新建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:0;  margin:0;}#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())