jquery实现瀑布流布局

来源：互联网发布：教师培训网络课程平台编辑：程序博客网时间：2024/05/01 17:38

瀑布流式布局：

是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，图片为等宽不等高，感觉很杂乱无章，但又有一定的规律感，不失优雅，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像花瓣网、蘑菇街、美丽说等。

一.接下来看看效果图：

由于图片选择不太好，所以没有达到很明显的在高度上参差不齐的效果，不过也还能看出来瀑布流布局。

二.下面讲讲瀑布流布局的思路是怎样的：

1.先放上足够多的图片，再给他们设置浮动或者内联，让其在一行显示，现在显示的图片是杂乱无章的，有的图片之间还会存在大量的空隙，那么怎么解决呢

2.现在我们其它的先不管，先放上第一行的图片，每一行放多少张我们可以让屏幕宽除以每张图片加上图片和图片之间的间隙来得到，这里假设每行放6张。

3.我们选择第一行中高度最小的图片，让下一张也就是第七张显示在它下面，然后又比较每一行的高度，让第八张又显示在比较完后高度最小的那张下面。所以这个时候我们需要定义一个数组来放置这些变化的高度，也就是图片的高度加上一些间距的高度，因为是一行6张，所以设置数组有6个数，每往后面加一张图片，假设是第四张后面加的，我们就给数组中的第四个数加上图片的高度和一些间距，这样又重新比较数组大小，来往后面继续加图片。从而形成瀑布流布局

4.然后滚动滚动条如何实现加载图片呢，这个是时候我们可以设置监听，当滚动条下拉到哪里就执行加载图片

5.加载图片使用jquery只需要定义好标签，然后appendTo()就行了，具体一次性加载多少个，大家可以自己定义

三.上面的思路可能讲得不太清楚，下面是具体代码，大家可以参考下：

index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="main"><div class="box"><div class="pic"><img src="images/0.jpg"/></div></div><div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/11.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/12.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/13.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/14.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/15.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/16.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/17.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/18.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/19.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/20.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/21.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/22.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/23.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/24.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/25.jpg" alt=""></div></div></div><script type="text/javascript" src="jquery1-9-1.js"></script><script type="text/javascript" src="script-jquery.js"></script></body></html>

style.css

*{margin:0;padding: 0;}#main{position: relative;}.box{padding: 15px 0 0 15px;float:left;}.pic{padding: 10px;border: 1px solid #ccc;border-radius: 5px;/*边框圆角*/box-shadow: 0 0 5px #ccc;/*阴影 参数从左至右依次是水平方向的阴影 垂直方向的阴影 模糊程度 阴影颜色*/}.pic img{width: 180px;height: auto;}

script-jquery.js

$(document).ready(function(){// 瀑布流布局的函数waterfall();// 假设是从后端传来的用来加载图片的数据var dataInt = {"data":[{"src":0},{"src":1},{"src":2},{"src":3}]}; // 监听滚动条滚动的事件$(window).on('scroll',function(){if (checkScrollSlide) {$.each(dataInt.data,function (key, value) {// 向后面添加图片var oBox = $('<div>').addClass('box').appendTo($('#main'));var oPic = $('<div>').addClass('pic').appendTo($(oBox));$('<img>').attr('src',"images/"+$(value).attr("src")+".jpg").appendTo($(oPic));});// 瀑布流布局的函数waterfall();}});});// 实现瀑布流布局的函数function waterfall () {var $boxs = $('#main>div');//匹配main下所有一级div// 宽,width()只获取定义的宽度，outerWidth()除了包括定义的宽度，还包括定义的padding或者border等等的宽度的和var w = $boxs.eq(0).outerWidth();// $(window).width()获取屏幕的宽var cols = Math.floor($(window).width()/w);// 设置main的宽，并居中$('#main').width(w*cols).css('margin','0 auto');var hArr = [];$boxs.each(function(index,value){var $val =  $(value);var h = $val.outerHeight();if(index < cols) {hArr.push(h);} else {var minH = Math.min.apply(null,hArr);var minHIndex = $.inArray(minH, hArr);$val.css({'position':'absolute','top':minH + 'px','left':minHIndex*w +'px'});hArr[minHIndex] += $val.outerHeight();}});}// 检查滚动条滚动的函数function checkScrollSlide () {// 获取最后一个boxvar $lastBox = $('main>div').last();// 最后一个box的一半到页面顶部的距离var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);// 屏幕滚动高度var scrollTop = $(window).scrollTop();// 屏幕高度var documentH = $(window).height();return (lastBoxDis < scrollTop+documentH)?true:false;}

0 0