jq实现瀑布流
静态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实现瀑布流的更多相关文章
- jq实现瀑布流效果
<!doctype html><html><head><meta http-equiv="Content-Type" content=&q ...
- 原生JS实现瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...
- jquery瀑布流的制作
首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...
- jQuery8种不同的瀑布流懒加载loading效果
优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果 在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)
一.Masonry 是基于Jquery插件,用于对CSS布局的可移动层进行重新布局.Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石 ...
- js原生瀑布流
背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...
- 自定义基于jquery竖向瀑布流插件
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...
随机推荐
- no projects are found to import
从svn上导出的项目在导入Eclipse中常常出现 no projects are found to import . 产生的原因是:项目文件里中没有".classpath"和&q ...
- Aizu/Aoj 0033 Ball
题目大意: 有编号1到10共10个球,从上方丢下去,入口处可以选择进入左边或者右边,最后10个球全部落下去后如果左右两侧都是从小到大的顺序,则输出YES:否则输出NO. 题目原本的标签枚举,复杂度是2 ...
- C++中sort()及qsort() （不完整介绍）
在平时刷算法题和oj的时候,排序算法是最经常用到的算法之一:且在各类算法书的目录中 也通常是将各种排序算法放在最前面来讲,可见排序算法的重要性.可能许多人都在算法书中有学过冒泡.快速排序的方法,也都大 ...
- Android与JS互相调用以及注意
近期项目中常常使用Html5而Android与JS调用常常会用到,这里记录一下,測试系统5.0以上. 这里先贴一下源代码 Activity: package jwzhangjie.com.webvie ...
- servlet 处理过程
刚才花了一个小时找 servlet 的一个错误.终于找出来了,也大概明确 tomcat server对请求的处理顺序.以下做简单总结: 浏览器发送请求,传给 tomcat 在此请求地址指向的文件中定义 ...
- web请求乱码问题总结
问题1:springmvc通过@ResponseBody向页面返回值(包括汉字)时,乱码 解决方案: springmvc3.2之后可以声明注解驱动器(不知道是不是这么翻译)的时候的控制编码的转换,结果 ...
- MySQL-TokuDB：MySQL 高性能存储引擎：TokuDB
ylbtech-MySQL-TokuDB:MySQL 高性能存储引擎:TokuDB 1.返回顶部 1. 在安装MariaDB的时候了解到代替InnoDB的TokuDB,看简介非常的棒,这里对ToduD ...
- FastDFS介绍(非原创)
文章大纲 一.FastDFS介绍二.FastDFS安装与启动(Linux系统)三.Java客户端上传图片四.参考文章 一.FastDFS介绍 1. 什么是FastDFS FastDFS是用C语言编 ...
- Gitlab smtp 设置
地址: https://blog.csdn.net/yongche_shi/article/details/78677163 # 腾讯云限制25发信端口,修改为465,并开启. https://doc ...
- JavaScript全局函数
JavaScript 中包含以下 7 个全局函数,用于完成一些常用的功能(以后的章节中可能会用到):escape( ).eval_r( ).isFinite( ).isNaN( ).parseFloa ...