纯js实现瀑布流展现照片(自动适应窗口大小)


Posted in Javascript onApril 08, 2013

用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道。

我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了。

然后进入下一个循环插入下一行。公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系:
h' * (w / h + y / x) = w
w是浏览器窗口的宽度,
则 h' = w / (w / h + y / x);

<html> 
<head> 
<style> 
img { 
border:1px dashed #000; 
display: inline-block; 
z-index:-1; 
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); 
box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); 
//-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
//-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
//-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
//transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
} 
</style> 
<script src="js/jquery.min.js"></script> 
</head> 
<body onload="display()"> 
<!--div id="title" style="position:absolute;width:300px;height:200px;background:red;"></div--> 
<script type="text/javascript"> 
window.onload=display; 
for (var i = 0; i < 34; ++ i) { 
var div = document.createElement('div'); 
div.setAttribute("id", "div_" + i.toString()); 
div.setAttribute("style", "position:absolute"); 
document.body.appendChild(div); 
} 
for (var i = 0; i < 34; ++ i) { 
var img = document.createElement('img'); 
img.setAttribute('src', '/images/' + 'psb_' + (i + 1).toString() + '.jpg'); 
document.getElementById("div_" + i.toString()).appendChild(img); 
} 
function display() { 
var col = 0; 
var row = document.body.clientWidth - 50; 
var H = 250; 
var h = 0; 
var w = 300; 
var jg = 20; 
var imgs = document.getElementsByTagName("img"); 
for (var i = 0; i < imgs.length; ++ i) { 
var flag = i; 
h = row / imgs[i].width * imgs[i].height; 
while (h > H && i < imgs.length - 1) { 
++ i; 
h = row / (row / h + (imgs[i].width + jg) / imgs[i].height); 
} 
w = 0; 
for (var j = flag; j <= i; ++ j) { 
imgs[j].parentNode.style.top = (col + jg).toString() + "px"; 
imgs[j].parentNode.style.left = (w + jg).toString() + "px"; 
imgs[j].style.height = h.toString() + "px"; 
w = w + h / imgs[j].height * imgs[j].width + jg; 
} 
col += h + jg; 
} 
/* 
var imgs = document.getElementsByTagName("img"); 
for (var i = 0; i < imgs.length; ++ i) { 
if (row + imgs[i].width > document.body.clientWidth + 100) { 
++ col; 
row = 0; 
} 
imgs[i].parentNode.style.top = (col * 250).toString() + "px"; 
imgs[i].parentNode.style.left = row.toString() + "px"; 
row += imgs[i].width + 10; 
} 
*/ 
} 
window.onresize=display; 
//$(window).resize(display); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
javascript中常用编程知识
Apr 08 #Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 #Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 #Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 #Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 #Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 #Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
简单的php购物车代码
2020/06/05 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python pass 语句使用示例
2014/03/11 Python
python中的五种异常处理机制介绍
2014/09/02 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python正则-re的用法详解
2019/07/28 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
党校自我鉴定范文
2013/10/02 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
个人欠款担保书
2014/05/20 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python