静态html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>

@charset "utf-8";
*{padding: 0;margin: 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: 165px;height: auto;}

</style>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/pubuliu.js" ></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg"/>
</div>
</div>
</div>
</body>
</html>

jq代码：

//页面加载，触发load事件后执行waterfall函数
$(window).on("load",function(){
waterfall();
// 创建图片的数组
var dataInt={"date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"}]}
// 鼠标滚动进行判断加载
$(window).on("scroll",function(){
// 是否触发加载，触发后执行函数
if(checkScrollSlide){
// 新加载的图片传递参数
$.each(dataInt.date,function(key,value){
var oBox=$("<div>").addClass("box").appendTo($("#main"));
var oPic=$("<div>").addClass("pic").appendTo($(oBox));
var oImg=$("<img>").attr("src","img/"+$(value).
attr("src")).appendTo($(oPic));
})
// 再次调用排序函数
waterfall();
}
})
})
function waterfall(){
// 包含选择器，必须用大于号的选择器，空格会将div的所有后代都找出来。所以用大于号，选择一级div
var $boxs=$("#main>div");
// 取出每一列的宽度，取出其中一个的宽度即可，outerwidth提取的值会将包括padding，border在内的值都提取出来
var w=$boxs.eq(0).outerWidth();
// 获取当前的列数，就是浏览器当前的宽度除以某一列的宽度即为当前的列数
var cols=Math.floor($(window).width()/w);
// 设置外部容器div的宽，和样式居中
$("#main").width(w*cols).css("margin","0 auto");
var hArr=[];
// 给每个$boxs绑定each事件，代替了js当中的for循环
$boxs.each(function(index,value){
// 定义h为当前$boxs的高度,outerHeight与outerwidth属性相同
var h=$boxs.eq(index).outerHeight();
// 当
if(index<cols){
hArr[index]=h
}else{
// 获取最小高度的图片的高度以及它句页面左侧的距离
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr)
// 给下一个图片设定位置
$(value).css({
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px"
})
// 将超过第一行的所有的图片都很据前一行最小的高度来定义位置
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
// 找到最后一个div
var $lastBox=$("#main>div").last();
// 最后一个div的高度
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
// 页面滚动条的高度
var scrollTop=$(window).scrollTop();
// 页面的高
var documentH=$(window).height();
// 最后一个div如果小于滚动条+页面的高度，就返回一个true
return (lastBoxDis<scrollTop+documentH)?true:false;
}

jq实现瀑布流的更多相关文章

  1. jq实现瀑布流效果

    <!doctype html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  3. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  4. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  5. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  6. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  7. Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)

    一.Masonry 是基于Jquery插件,用于对CSS布局的可移动层进行重新布局.Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石 ...

  8. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

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

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

随机推荐

  1. 纪录:Solr6.4.2+Flume1.7.0 +morphline+kafka集成

    当前大多数企业版hadoop的solr版本都还停留在solr4.x,由于这个版本的solr本身的bug较多,使用起来会出很多奇怪的问题.如部分更新日期字段失败的问题. 最新的solr版本不仅修复了以前 ...

  2. HDU 2912

    直线关于球的多次反射,求最后一次反射点 #include <iostream> #include <cstdio> #include <cstring> #incl ...

  3. [Angular] Upgrading to RxJS v6

    This is just a learning blog post, check out the talk. 1. Custom pipeable operators: Custom pipeable ...

  4. Dozer--第三方复制工具,哎哟,还不错!

    Dozer简单点说,就是拷贝工具,也是复制工具的意思,官方的解释是:Dozer is a Java Bean to Java Bean mapper that recursively copies d ...

  5. 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第一节:3D时代来临！

    <使用Cocos2d-x 开发3D游戏>系列在线课程 第一节:3D时代来临.Cocos2d-x程序猿的机遇和挑战! 视频地址:http://edu.csdn.net/course/deta ...

  6. php 日期格式化

    date('Y-m-d H:i:s',time()); 2014-09-01 05:06:01 date(' y-n-j G:i:s',time()); 14-9-1 5:06:01 mktime(h ...

  7. [JavaEE] Spring学习资源链接

    学习规划 http://forrest-lv.iteye.com/blog/1166947 SpringMVC - 框架配置 http://blog.csdn.net/ljhabc1982/artic ...

  8. css兼容性的一些问题

    1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px, ...

  9. VirtualBox 5.1.14 获取VirtualBox COM对象错误

    Oracle VM VirtualBox 5.1.14 安装完成之后显示错误, Failed to instantiate CLSID_VirtualBox w/ IVirtualBox, but C ...

  10. 大数据查询——HBase读写设计与实践--转

    背景介绍 本项目主要解决 check 和 opinion2 张历史数据表(历史数据是指当业务发生过程中的完整中间流程和结果数据)的在线查询.原实现基于 Oracle 提供存储查询服务,随着数据量的不断 ...