Pure js は写真を表示するためのウォーターフォール フローを実装します (ウィンドウ サイズに自動的に適応します)_JavaScript スキル

写真を表示するにはウォーターフォール フローを使用するのが一番です。 以下にウォーターフォール フローの実装方法を示します (各行の長さはブラウザ ウィンドウの長さと同じです)。これは CSS3 を使用して実装することもできます。 . Googleで検索すると分かります。

私のアイデアは、この行の画像のアスペクト比が変更されず、高さが 250 未満になったときに、サイクルが完了する、つまりこの行が挿入されるというものです。

次に、次のループに入り、次の行を挿入します。式は非常に簡単です。この行の現在の高さを h とすると、高さと幅が (x, y) の画像を挿入すると、次の関係が満たされます:
h' * (w / h y) / x) = w
w はブラウザ ウィンドウの幅、
の場合、 h' = w / (w / h y / x)

コピーcode コードは次のとおりです。

>


window.onload=display;
for (var i = 0; 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 var img = document.createElement('img' );
img.setAttribute(' src', '/images/' 'psb_' (i 1).toString() '.jpg');
document.getElementById("div_" i.toString() ).appendChild(img);
関数 display() {
var row = document.body.clientWidth - 50; 🎜>var h = 0;
var w = 300;
var imgs = document.getElementsByTagName("img"); ; imgs.length; i) {
var flag = i;
h = row / imgs[i].width * imgs[i].height; imgs.length - 1) {
i;
h = 行 / (行 / h (imgs[i].width jg) / imgs[i].height);
}
w = 0;
for (var j = flag; 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"; / imgs[j].height * imgs[ j].width jg;
}
col = h jg;
/*
var imgs = document.getElementsByTagName("img" );
for (var i = 0; i if (row imgs[i].width > document.body.clientWidth 100) {
col; 🎜>行 = 0;
}
imgs[i].parentNode.style.top = (col * 250).toString() "px"; = row.toString() "px";
row = imgs[i].width 10;
*/
}
window.onresize=display; $(window).resize(display);