纯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修改地址栏URL参数解决url参数问题
Dec 15 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
深入浅析vue组件间事件传递
Dec 29 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 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
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python提取log文件内容并画出图表
2019/07/08 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
应届毕业生求职信范文
2013/12/18 职场文书
安全事故检讨书
2014/01/18 职场文书
校园之声广播稿
2014/01/31 职场文书
气象学专业个人求职信
2014/04/22 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
家庭贫困证明
2015/06/16 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
MYSQL常用函数介绍
2022/05/05 MySQL