纯js实现瀑布流展现照片(自动适应窗口大小)
更新时间：2013年04月08日 11:09:03 作者：
用瀑布流来展现照片再好不过了,我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了
用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用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>
我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于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>
相关文章
![js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]](//img.jbzj.com/images/xgimg/bcimg0.png)
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
W3C的标准告诉我们，可以通过Dom对象的contentDocument属性来返回文档对象。2011-01-01
这篇文章主要介绍了js字符串处理之绝妙的代码，包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串，有时候需要对字符进行处理的时候可以用得到2019-04-04
序列化是将对象状态转换为可保持或可传输的格式的过程。与序列化相对的是反序列化，它将流转换为对象。这两个过程结合起来，可以轻松地存储和传输数据2013-07-07
下面小编就为大家带来一篇浅谈js常用内置方法和对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了js类的继承定义与用法,结合实例形式分析了javascript关于类的定义与继承的相关使用技巧,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇layui prompt 设置允许空白提交的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面小编就为大家带来一篇js生成随机数(指定范围)的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
使用IE的地址栏来辅助调试Web页脚本...2007-03-03
这篇文章主要为大家详细介绍了微信小程序下拉框组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本篇文章主要介绍了微信小程序实现长按删除图片的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
![js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论