首先非常感谢网友微笑的无私分享，此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. SOS.dll (SOS Debugging Extension)

    SOS.dll (SOS Debugging Extension) lays threads associated with a live thread. The -special option di ...

  2. Linux 进程通信（有名管道）

    有名管道(FIFO) 有名管道是持久稳定的. 它们存在于文件系统中. FIFO比无名管道作用更大,因为他们能让无关联的进程之间交换数据. 管道文件一般用于交换数据. shell命令创建管道 一个she ...

  3. StringBuffer类 和 StringBuilder类

    上一篇中讲解了String类的用法.那么String有什么特点呢? 字符串特点:字符串是常量,其值在创建后就不能被修改.字符串的内容一旦发生变化,就会创建一个新的对象. 代码验证字符串特点: publ ...

  4. C# winform 上传文件到服务器

    1.首先要在服务器端新建一个网站axpx页 然后再网站的后台写代码获取winform传过来的文件名. 声明:这个方法虽然最简单最省事,但是上传大文件可能会报错,我的机器是10M, 超过10M就会提示报 ...

  5. [CareerCup] 10.5 Web Crawler 网络爬虫

    10.5 If you were designing a web crawler, how would you avoid getting into infinite loops? 这道题问如果让我们 ...

  6. [CareerCup] 13.9 Aligned Malloc and Free Function 写一对申请和释放内存函数

    13.9 Write an aligned malloc and free function that supports allocating memory such that the memory ...

  7. WPF MVVM 写一个健壮的INotifyPropertyChanged基类

    当我们用MVVM的时候要实现INotifyPropertyChanged,如果你是基于.net4.5以下的framework(.net4.5已有新特性我这里就不说了) 你很可能会这么写 public ...

  8. Fiddler工具的基本功能

    Fiddler是一款用于网页数据分析,抓取的工具,里面集成了对网页强大的功能外,还可以通过设置,使其对手机的数据也可以进行抓取 Fiddler的原理是: 通过在客户端和服务器之间创建一个代理服务器来对 ...

  9. [渣翻译] 在ASP.NET MVC WebAPI项目中使用 AngularJS

    原文地址http://blog.technovert.com/2013/12/setting-up-angularjs-for-asp-net-mvc-n-webapi-project/ 我们最近发布 ...

  10. Linq之Lambda进阶

    目录 写在前面 系列文章 带有标准查询运算符的Lambda Lambda中类型推断 Lambda表达式中变量作用域 异步Lambda 总结 写在前面 上篇文章介绍了Lambda的基本概念以及匿名方法, ...