Jquery 实现瀑布流布局
//保证img文件夹下有图片
//引入jquery
<script src="Script/jquery-1.7.2.js"></script> <style>
* {
padding: 0;
margin: 0;
} #main {
position: relative;
} .pin {
padding: 10px 0 0 10px;
float: left;
} .box {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
height:90%;
} .box img {
width: 162px;
height: auto;
}
</style>
<body>
<form id="form1" runat="server">
<div id="main">
<div class="pin">
<div class="box">
<img src="img/1.jpg" />
</div>
</div> <div class="pin">
<div class="box">
<img src="img/2.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/3.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/5.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/6.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/7.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/8.jpg" />
</div>
</div>
</div>
</form>
</body>
////////////js
<script>
window.onload = function () {
waterfall();//加载时成瀑布流效果
var imgss = { "data": [{ "src": "img/1.jpg" }, { "src": "img/2.jpg" }, { "src": "img/3.jpg" }, { "src": "img/4.jpg" }, { "src": "img/5.jpg" }, ] };
$(window).on("scroll", function () {
if (fun_scroll()) {
for (var i = 0; i < imgss.data.length; i++) {
var div_pin = $("<div>").addClass("pin");
var div_box = $("<div>").addClass("box");
div_box.appendTo(div_pin);
var img = $("<img>").attr("src", imgss.data[i].src);
img.appendTo(div_box);
div_pin.appendTo($("#main"));
waterfall();
}
}
});
} //设置瀑布流
function waterfall() {
////获取单个宽度
/////////////$(".pin").width();//只获取元素的真实宽度
/////////////document.getElementById("id")offsetWidth;//获取元素加上外间距的宽度
var objWidth = $(".pin:eq(0)").get(0).offsetWidth;//.width();
////获取每行个数document.documentElement.clientWidth
var num = Math.floor($(document).width() / objWidth);
$("#main").css({ "width": (objWidth * num) + "px", "margin": "0 auto" });
var heigs = [];
$(".pin").each(function (i, obj) {
if (i < num) {
heigs.push($(obj).get(0).offsetHeight);
} else {
//获取最小的值
var mixh = Math.min.apply(null, heigs);
//获取值的索引
var inx = $.inArray(mixh, heigs, null);
$(obj).css({
"position": "absolute",
"top": mixh,
"left": $(".pin").eq(inx).position().left,
});
heigs[inx] += $(obj).get(0).offsetHeight;
}
});
} //滚动,滚动条时动态加载图片
var fun_scroll = function () {
//最后一个元素距离顶部的高度+自身一半高度
var lastObjHeight = Math.floor($(".pin").last().offset().top) + Math.floor($(".pin").last().height() / 2);
//卷进去的高度
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
//屏幕的高度
var deviceheight = document.documentElement.clientHeight;
return ((deviceheight + scrollHeight) > lastObjHeight) ? true : false;
}
</script>
Jquery 实现瀑布流布局的更多相关文章
- jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- jQuery模拟瀑布流布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery实现瀑布流布局详解(PC和移动端)
首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box"> <img class="img" ...
- jQuery实现瀑布流布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
随机推荐
- 电脑无法识别U盘(usb类外接设备)的解决办法
首先分析USB无法识别的硬件原因: 1.BIOS禁用了USB设备.(进入BIOS,将"Enable USB Device"修改为"Enable") 2.USB接 ...
- 用VerbalExpressions来帮助我们写正则表达式
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用VerbalExpressions来帮助我们写正则表达式.
- Python实现二叉树的前序遍历、中序遍历
计算根节点到叶子节点的所组成的数字(1247, 125, 1367)以及叶子节点到根节点组成的数字(7421, 521, 8631),其二叉树树型结构如下 计算从根节点到叶子节点组成的数字,本质上来说 ...
- Android虚拟机Dalvik介绍
Dalvik和标准Java虚拟机(JVM)之间的首要差别之一,就是Dalvik基于寄存器,而JVM基于栈.一直以来都有人在猜测,选择基于寄存器的方式是因为它对提前优化(ahead-of-time o ...
- Offer是否具有法律效力?
版权声明:原创作品,同意转载,转载时请务必以超链接形式标明文章原始出版.作者信息和本声明.否则将追究法律责任.本文地址: http://blog.csdn.net/jobchanceleo/archi ...
- android开发之ExpandableListView的使用,实现类似QQ好友列表
由于工作需要,今天简单研究了一下ExpandableListView,做了一个类似QQ列表的Demo,和大家分享一下. 效果图如下: 先来看看主布局文件: <RelativeLayout xml ...
- Java基础知识强化之IO流笔记46:IO流练习之 把文本文件中数据存储到集合中的案例
1. 把文本文件中数据存储到集合中 需求:从文本文件中读取数据(每一行为一个字符串数据)到集合中,并遍历集合. 分析: 通过题目的意思我们可以知道如下的一些内容, 数据 ...
- asp.net下载的方法1
1. 首先新建一个用于进行下载处理的page页,如download.aspx,里面什么东西也没有. 2. 添加一个DownloadHandler类,它继承于IHttpHandler接口,可以用来自定义 ...
- android activity启动的4种方式记录及打开其他应用的activity的坑
Android启动的四种方式分别为standard,singleTop,singleTask,singleInstence. standard是最常见的activity启动方式,也是默认的启动的方式. ...
- Mac上安装boost开放环境
方法一: 去Macports官网的下载页面(https://distfiles.macports.org/MacPorts/)下载对用Mac系统的pkg文件,下载完成之后,双击,一路[下一步],到安装 ...