首先非常感谢网友微笑的无私分享，此Jquery特效是一款非常流行和实用的瀑布流布局，核心代码只有几十行，是我见过代码量最少的瀑布流布局，非常适合网友们学习哦，希望大家好好看一下这个Jquery特效的原代码，里面的每个功能注释写得非常详细。。

主要包括了以下几个功能函数：
1、瀑布流主函数
2、获取高度最小的列的函数
3、判断请求数据的开关的函数
4、请求数据加载的样式的函数

瀑布流代码如下：

JS与CSS代码

/**

 *    作者：微笑

 *    QQ：904835003

 *    邮箱：904835003@qq.com

 *    支持原创、关注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="data:images/1.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/2.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/4.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/5.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/7.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/8.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="data:images/10.jpg">

            </div>

        </div>

    </div>

</body>

</html>

HTML

网友微笑分享原创Jquery实现瀑布流特效的更多相关文章

  1. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  2. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  4. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  5. jquery版瀑布流

    一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...

  6. jQuery制作瀑布流(转)

    “瀑布流布局”随着pinterest网的流行而出名,现在国内使用这种风格布局的网站也越来越多,比如说Mark之,蘑菇街,点点网,哇哦等等.我第一次听到这个布局名称是来自于“乔花写的<瀑布流布局浅 ...

  7. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

  8. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...

  9. jQuery实现瀑布流

    瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...

随机推荐

  1. 3D数学基础：3D游戏动画中欧拉角与万向锁的理解

    首先来看一下什么是欧拉角(Euler angles)?构件在三维空间中的有限转动,可依次用三个相对转角表示,即进动角.章动角和自旋角,这三个转角统称为欧拉角.——引自百度百科莱昂哈德·欧拉用欧拉角来描 ...

  2. java中从1970-1-1到当前时间之间的毫秒数转换为oracle date

    java中System.currentTimeMillis()取到的是从1970-01-01 00:00:00.000到当前时间的毫秒数,一个long类型的值. 现在oracle数据库中某表中存取的是 ...

  3. IIS增加并发数

    网站出现这样的错误信息:Error Summary: HTTP Error 503.2 - Service UnavailableThe serverRuntime@appConcurrentRequ ...

  4. Ace 动画应用实例 ------启动欢迎界面

    仔细观察手机应用很多都用到了动画效果 那么咱们也做一个 除了位移没有使用 其他都有 布局随便放张图片 public class SplashActivity extends Activity { pr ...

  5. 如何清洗 Git Repo 代码仓库

    git prune 如何清洗 Git Repo 代码仓库       在腾讯云上创建您的SQL Cluster>>> »   相信不少团队的代码仓库 Git Repo 变得越来越大. ...

  6. 信息安全系统设计基础实验四 20135210&20135218

    北京电子科技学院(BESTI) 实     验    报     告 课程:信息安全系统设计基础          班级:   1352 姓名:程涵,姬梦馨 学号:20135210,20135218 ...

  7. Jquery操作select，radio，input，p之类

    select的操作 变化后触发操作 $("#txtaddprojecturl").change(function(){ $("#addprojectname") ...

  8. 高校手机签到系统——zxing.net生成二维码（补充）

    高校手机签到系统——第一部分Authority权限系统(上) 高校手机签到系统——第一部分Authority权限系统(下) 高校手机签到系统——手机客户端 关于zxing.net的使用网上已有很多说明 ...

  9. 教你写一个Android可快速复用的小键盘输入控件

    引子 在Android项目开发中特别是一些稍大型的项目,面对需求文档的时候你经常会发现很多地方用到了同样的组件,但是又略有不同.比如这个: 右边是一个小键盘输入板,左边当焦点不同的时候分别用右边的小键 ...

  10. 第五章 与众不同的this

    我们来看下面的代码: ①var name="windows"; function myfun() //定义一个函数myfun { console.log("I'm &qu ...