纯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高级程序设计 扩展--关于动态原型
Nov 09 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
js实现拾色器插件(ColorPicker)
May 21 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
PHP学习笔记之二
2011/01/17 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
施工安全责任书
2014/04/14 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
代办社保委托书范文
2014/10/06 职场文书
地陪导游欢迎词
2015/01/26 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Element实现动态表格的示例代码
2021/08/02 Javascript