纯JS实现自适应窗口宽度的瀑布流照片墙

纯JS实现自适应窗口宽度的瀑布流照片墙

采用瀑布流布局展示图片列表是一种高效且美观的方式。以下提供一种基于JavaScript的实现方案，其特点是每一行的总宽度自动适配浏览器窗口的当前宽度。虽然CSS3也能实现类似效果，但通过JavaScript控制布局同样简单直观，只需查阅相关资料即可掌握。

实现的核心思路是逐个插入图片。在每一行中，保持图片原有的长宽比例不变，并计算其高度。当该行所有图片的高度均低于预设阈值（例如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>