首先非常感谢网友微笑的无私分享，此Jquery特效是一款非常流行和实用的瀑布流布局，核心代码只有几十行，是我见过代码量最少的瀑布流布局，非常适合网友们学习哦，希望大家好好看一下这个Jquery特效的原代码，里面的每个功能注释写得非常详细。。
主要包括了以下几个功能函数：
1、瀑布流主函数
2、获取高度最小的列的函数
3、判断请求数据的开关的函数
4、请求数据加载的样式的函数
瀑布流代码如下：
JS与CSS代码
/**
* 作者：微笑
* QQ：904835003
* 邮箱：[email protected]
* 支持原创、关注JquerySchool网站
* 编写时间：2013-02-25
*/
$(window).load(function(){
var data = [{"src":"images/3.jpg"},{"src":"images/4.jpg"},{"src":"images/5.jpg"},{"src":"images/6.jpg"},
{"src":"images/7.jpg"},{"src":"images/8.jpg"},{"src":"images/9.jpg"},{"src":"images/10.jpg"}];
PBL("#pubu",".box",1);
var ajaxkey = true;//设置ajax请求的开关,如需动态加载、需要打开这个开关
$(window).scroll(function(){
if (getDataCheck() && ajaxkey) {
//不调用getData时 的模拟数据如下
var pubu = $("#pubu");
for(i in data){
var box = $("<div class=‘box‘><div class=‘pic‘><img src="+data[i].src+"></div></div>");
pubu.append(box);
}
PBL("#pubu",".box",1);
//getData（"#pubu",".box"）；//jquery的Ajax异步加载数据、需要从数据库加载的、需要调用该函数
};
});
})
/************************************************* ↓ 函数 ↓ */
//瀑布流主函数
function PBL(outer,boxs,style){//outer父级元素、boxs子级元素，style加载样式（ 1或者2 ）
var pubu = $(outer);
var box = $(boxs);
var num = Math.floor($(document.body).width()/box.outerWidth());//根据浏览器宽度获得显示的列的数量
pubu.width(num*(box.outerWidth()));//给pubu的宽度赋值
var allHeight = [];//定义一个数组存储所有列的高度
for(var i=0;i<box.length;i++){
if (i<num) {
allHeight[i]=box.eq(i).outerHeight();
}else{
var minHeight = Math.min.apply({},allHeight);//获得所有的列中高度最小的列的高度
var sy = getSy(minHeight,allHeight);//获取高度最小的列的索引
getStyle(box.eq(i),minHeight,sy*box.eq(i).outerWidth(),i,style);
allHeight[sy] += box.eq(i).outerHeight();
}
}
}
//获取高度最小的列的索引
function getSy(minH,allH){
for(sy in allH){
if(allH[sy]==minH) return sy;
}
}
//请求数据的方法
function getData(){
ajaxkey = false;
$.ajax({
type:"get",//设置get请求方式
url:"request.php",//设置请求的脚本地址
data:"",//设置请求的数据
dataType:"json",//设置请求返回的数据格式
success:function(data){
var pubu = $(‘#pubu‘);
for(i in data){
var box = $("<div class=‘box‘><div class=‘pic‘><img src="+data[i].src+"></div></div>");
pubu.append(box);
}
PBL("#pubu",".box",2);
},
complete:function(){
ajaxkey = true;
}
})
}
//判断请求数据的开关
function getDataCheck(){
var pubu = $("#pubu");
var box = $(".box");
debugger;
var lastboxHeight = $(box[box.length-1]).offset().top+Math.floor($(box[box.length-1]).outerHeight()/2);
var documentHeight = $(window).height();
var scrollTop = $(document).scrollTop();
return lastboxHeight<documentHeight+scrollTop?true:false;
}
//存储开始请求数据条数的位置
var getStartNum = 0;
//设置请求数据加载的样式
function getStyle(boxs,top,left,index,style){
if (getStartNum>=index) {
return;
}
boxs.css("position","absolute");
switch(style){
case 1:
boxs.css({
"top":top+$(window).height(),
"left":left
});
boxs.stop().animate({
"top":top,
"left":left
},999);
break;
case 2:
boxs.css({
"top":top,
"left":left,
"opacity":"0"
});
boxs.stop().animate({
"opacity":"1"
},999);
}
getStartNum = index;//更新请求数据的条数位置
}
JS
#pubu {
margin:0 auto;
position:relative;
}
#pubu .box {
width:280px;
height:auto;
padding:10px;
float:left;
}
#pubu .box .pic {
width:280px;
height:auto;
box-shadow:1px 1px 4px #ddd,-1px -1px 4px #ddd;
border-radius:4px;
}
#pubu .box .pic img {
display: block;
width:250px;
margin:0 auto;
padding: 15px 0;
cursor: pointer;
}
CSS
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网友微笑分享原创Jquery实现瀑布流特效</title>
<meta name="Keywords" contentcss,JquerySchool" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/pubu.css">
<style type="text/css">
body {
padding:0;
margin:0;
background:url(images/bg.jpg);
}
img {
border:none;
}
a {
text-decoration: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write(‘<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>‘)
</script>
<script type="text/javascript" src="js/pubu.js"></script>
</head>
<body>
<div id="pubu">
<div class="box">
<div class="pic">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg">
</div>
</div>
</div>
</body>
</html>
HTML
时间： 2024-10-16 15:24:34