纯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 window.setTimeout() 的详细用法
Nov 04 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 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源代码安装常见错误与解决办法分享
2013/05/28 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
python概率计算器实例分析
2015/03/25 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
远程教育心得体会
2014/01/03 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
作弊检讨书1000字
2014/02/01 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
2014年网管工作总结
2014/12/11 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
Python加密技术之RSA加密解密的实现
2022/04/08 Python