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 ...
随机推荐
- ElasticSearch中profile API的使用
1. 前言 profile API 是 Elasticsearch 5.x 的一个新接口.通过这个功能,可以看到一个搜索聚合请求,是如何拆分成底层的 Lucene 请求,并且显示每部分的耗时情况. 2 ...
- 0719show engine innodb status解读
转自 http://www.cnblogs.com/zengkefu/p/5678100.html 注:以下内容为根据<高性能mysql第三版>和<mysql技术内幕innodb存储 ...
- mysql-windows修改root密码
安装mysql完成后 直接进入方式 mysql -u root -p 设置mysql的root密码 mysql -u root -p password 8888
- 优化系列 | DELETE子查询改写优化
0.导读 有个采用子查询的DELETE执行得非常慢,改写成SELECT后执行却很快,最后把这个子查询DELETE改写成JOIN优化过程 1.问题描述 朋友遇到一个怪事,一个用子查询的DELETE,执行 ...
- Android View系统解析(下)
转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/38426471(来自singwhatiwanna的csdn博客) Androi ...
- ArcGIS教程：加权总和
摘要 通过将栅格各自乘以指定的权重并合计在一起来叠加多个栅格. 插图 插图中,像元值与其权重因子相乘.两者所得结果相加创建输出栅格.以左上角像元为例.两个输入的值变为 (2.2 * 0.75) = 1 ...
- hdu 1235 统计同成绩学生人数
import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = ...
- u-boot学习(五)：u-boot启动内核
u-boot的目的是启动内核.内核位于Flash中,那么u-boot就要将内核转移到内存中.然后执行命令执行之.这些操作是由bootcmd命令完毕的. bootcmd=nand read.jffs2 ...
- 扩展欧几里德 poj1061 青蛙的约会
扩展欧几里德很经典.可是也有时候挺难用的.一些东西一下子想不明确.. 于是来了一个逆天模板..仅仅要能列出Ax+By=C.就能解出x>=bound的一组解了~ LL exgcd(LL a, LL ...
- 线程同步、死锁和通信——Java多线程（二）
一.多线程同步 上一篇随笔中,我曾遇到对多线程程序的多次运行结果不一致的情况,这主要是因为没有对这些线程在访问临界资源做必要的控制,而接下来就用线程的同步来解决这个问题. 1.同步代码块 class ...