ウォーターフォール フローです! レスポンシブです!_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:17:29
オリジナル
1070 人が閲覧しました

Untitled.gif

そうです! これは滝の流れです! 実現するのは難しそうに見えますが、実際には li タグを使用してこれらの小さなブロックを作成しました。ニーズに応じてカスタマイズすることもできます。 li タグに画像やその他のものを挿入する必要があります。Web ページにレスポンシブなウォーターフォール フローを実装する方法を学びましょう

最初のステップは HTML を書くことです

一部の友人は、私たちが持っていると思うかもしれません。 20 個のブロックで 20 個のタグを記述する必要がある場合は、間違っています。JS コードでは、for ループを使用して HTML 内の 10、100、1000 個のタグをチェックできます。もちろん、必要なだけ使用できます。ウォーターフォール フロー用に事前に実行しておいた方がよいでしょう。良い CSS スタイルです。私のこれらの小さなブロックはすべて li タグによって作成されているため、JS で作成された li タグには対応するクラス名が直接割り当てられます。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            * {                margin: 0;                padding: 0;            }            #flow {                list-style: none;                margin: 0 auto;                position: relative;            }            #flow li {                position: absolute;                background-color: #CCCCCC;                font-size: 50px;                width: 200px;                transition: all 0.5s;            }        </style>    </head>    <body>        <ul id="flow">            <!--<li>1</li>-->        </ul>    </body>
ログイン後にコピー

2 番目のステップJS コードの準備

このステップでは、関数の戻り値を使用して各 li 要素の高さを定義する必要があります。もちろん、高さをランダムに定義したくない場合は、配列を書くことができます。私の全体的なレイアウトは左から 10 ピクセル離れているので、注意深い友人は、各要素の間隔が 10 ピクセルであることに気づいたかもしれません。そのため、paddingSpace 変数がここに作成されました。各 li 要素の間隔を制限します。残りはコード内にあります。対応するコメントがありますので、ご自身で理解してください。

3 番目のステップで li 要素を作成します。

このコードのステップでは、bol が表示されます。値を定義し、4 番目のステップで bol 値を定義しました。bol の値に基づいて、レイアウト関数が li を作成するか、li の位置を更新するかを決定します。このステップでは、まず bol を true と見なします。 liタグを取得し、画面の幅に応じて行数を設定し、liタグの数に応じてulの幅を定義します。ここでの目的は、各 li タグの HTML コンテンツを指定した後、4 番目のステップで作成された li タグを挿入するための準備です。応答性の高いウォーターフォール フローを実装するための 3 番目のステップをエコーし​​ます。

まず、最も短い列を見つけて、li 要素を最も短い列の下に挿入し、各 li の位置を定義します。最後に、システムの window.onresize 関数が使用されます。画面サイズが変更されたときに、layout() メソッドを実行して li の位置を更新し、応答性の高いウォーターフォール フローを実現します。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート