纯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 相关文章推荐
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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
YII路径的用法总结
2014/07/09 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
js闭包用法实例详解
2016/12/13 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python单例模式的两种实现方法
2017/08/14 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
多个python文件调用logging模块报错误
2020/02/12 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
学生党员思想汇报范文
2014/01/09 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
热门专业求职信
2014/05/24 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
办理房产过户的委托书
2014/09/14 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Redis分布式锁的7种实现
2022/04/01 Redis