ウォーターフォールフローレイアウトコードの例

著者：Eve Cole 更新時間：2025-06-12 18:00:04

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

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title>ウォーターフォールフローレイアウトコード</title>

ボディ、Div、IMG、H1、H2、H3、H4、H5、H6 {パディング：0PX;マージン：0px; }

img {border：none; }

.wrapper {width：960px;マージン：0 Auto; }

＃con1_1 {位置：相対; }

＃con1_1 .product_list {position：absolute;左：0px;上：0px;パディング：10px;背景：#eee; }

.product_list img {width：200px;表示：ブロック; }

.product_list h2 {padding：5px 0px;フォントサイズ：12px;テキストアライグ：センター;色：＃333; }

</style>

</head>

<body>

<div>

<h3>これはテキストのタイトル部分です</h3>

<h2>画像の高さ</h2>

</div>

<h2>画像の高さ</h2>

</div>

<h2>画像の高さ</h2>

</div>

<h2>画像の高さ</h2>

</div>

<h2>画像の高さ</h2>

</div>

<h2>画像の高さ</h2>

</div>

<h2>画像の高さ</h2>

</div>

<h2>画像の高さ</h2>

</div>

<h3>このテキストの行の位置を最初に使用して、js </h3>を使用して上記のコンテンツの高さを計算する必要があります</h3>

</div>

</body>

原則：1。liのすべての高さ値を配列に置く

2。最初の行の上部は0です

3.どのliが高さの最小値であるかを計算します

4.そのliの下に次のliを置きます

varマージン= 10; //間隔を設定します

var li = $（ "。Product_List"）; //ブロック名

var li_w = li [0] .offsetwidth+margin; //ブロックの実際の幅を取得する

関数liuxiaofan（）{

var h = []; //ブロックの高さを記録する配列

var n = 960/li_w | 0;

for（var i = 0; i <li.length; i ++）{

li_h = li [i] .offsetheight; //各Liの高さを取得します

if（i <n）{// nは最も多くの線を持つliであるため、n未満は最初の行です

max_h = math.max.apply（null、h）;

h [i] = li_h; //各Liを配列に入れます

li.eq（i）.css（ "top"、0）; //最初の行のliの最高値は0です

li.eq（i）.css（ "left"、i * li_w）; // i-th liの左座標はi * liの幅です

}

それ以外{

min_h = math.min.apply（null、h）; //アレイで最小値を取得します。

minkey = getArraykey（H、min_H）; //最小値に対応するポインター

h [minkey] += li_h +マージン; //新しい高さを追加した後に高さの値を追加

li.eq（i）.css（ "top"、min_h+margin）; //最初にLiを最小の高さで取得してから、次のLiをその下に置きます

li.eq（i）.css（ "left"、minkey * li_w）; // i番目のliの左座標はi*liの幅です

}

$（ "h2"）。eq（i）.text（ "height："+li_h）; //ブロックの高さ値を対応するブロックH2タイトルに書き込みます

}

max = math.max.apply（null、h）;

$（ "＃con1_1"）。css（ "height"、max）;

}

/ *操作中の操作を使用して、配列内の特定の値の項目の対応する数を返します（たとえば、最小の高さ値は配列の数です） */

関数getArrayKey（s、v）{for（k in s）{if（s [k] == v）{return k;}}}}

/*画像がロードされていない場合は高さの値がわからないため、ここでオンロードを使用してください*/

window.onload = function（）{liuxiaofan（）;};

window.onresize = function（）{liuxiaofan（）;};

$（function（）{

$（ "。Product_List"）。hover（function（）{

$（this）.css（ "background-color"、 "＃ddd"）;

}、関数（） {

$（this）.css（ "background-color"、 "＃eee"）;

}）;

</script>

</html>