纯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 13 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
Djang中静态文件配置方法
2015/07/30 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python生成器推导式用法简单示例
2019/10/08 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
一些PHP的面试题
2015/05/06 面试题
差生评语大全
2014/05/04 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers