纯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中执行环境（作用域）与作用域链，并在文章结尾处做出了总结，感兴趣的朋友可以看下2016-12-12
这篇文章主要为大家详细介绍了js自定义弹框插件的简单封装，自己封装一个弹框插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
下面小编就为大家带来一篇js 获取范围内的随机数实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
js定时器setInterval、clearInterval的使用方法举例
Javascript的setTimeOut和clearInterval函数应用非常广泛,它们都用来处理延时和定时任务,这篇文章主要给大家介绍了关于js定时器setInterval、clearInterval使用方法的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了JavaScript基于面向对象之创建对象，对创建对象进行了详细描述，感兴趣的小伙伴们可以参考一下2015-12-12
JavaScript encodeURI 和encodeURIComponent
encodeURI和encodeURIComponet函数都是javascript中用来对URI进行编码，将相关参数转换成UTF-8编码格式的数据。URI在进行定位跳转时，参数里面的中文、日文等非ASCII编码都会进行编码转换2015-12-12
web开发中，经常会使用验证码功能，例如登录、注册，或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码，感兴趣的朋友一起看看吧2017-06-06
这篇文章主要介绍了JavaScript如何生成二维数组问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了第三篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Bootstrap中data-target 到底是什么的相关资料，我目前理解到在bootstrap中data-target，data-toggle等属性主要有两种作用，具体哪两种作用，大家通过本文详细了解下2017-02-02
最新评论