纯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>
相关文章
在javascript运动系列中，详细介绍了各种运动，其中就包括碰壁运动。但是，如果用canvas去实现，却是另一种思路。本文将详细介绍canvas动态小球重叠效果。下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript实现经典排序算法之冒泡排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
IE6/7/8中Option元素未设value时Select将获取空字符串
可以看到当忘记写option的value时这些现代浏览器都会尽量返回正确的（客户端程序员想要的）结果value，其容错性比IE6/7/8做的更好。2011-04-04
这篇文章主要介绍的是一个js确认删除对话框适用于a标签及submit，非常好用，需要的朋友不要错过2014-07-07
这篇文章主要介绍了JS实现线性表的顺序表示方法,简单分析了线性表的原理并结合实例形式给出了线性表的插入与删除实现技巧,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JavaScript获取Url里的参数,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JavaScript实现的encode64加密算法,实例分析了javascript处理encode64编码针对字符串加密的技巧,非常简洁实用,需要的朋友可以参考下2015-04-04
本篇文章主要介绍了原生js实现offset方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了原生JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束，由于浏览器垃圾回收方法有bug，会产生内存泄露，下面与大家详细探讨下内存泄露的几种情况2013-05-05
最新评论