JS を使用してウォーターフォールフローレイアウトを実装する方法を段階的に説明します。-jsチュートリアル-php.cn

JS を使用してウォーターフォールフローレイアウトを実装する方法を段階的に説明します。

藏色散人

リリース： 2023-04-05 15:47:48

転載

2519 人が閲覧しました

この記事では、JavaScript に関する関連知識を紹介します。主に、js を使用してウォーターフォールフローレイアウトを実装する方法について説明します。コード例もあります。興味のある友人は以下を参照してください。すべての人に役立つことを願っています。役立つ。

滝の流れのレイアウトを段階的に攻略しましょう

序文

滝の流れのレイアウトは次のとおりです。現在人気が高まっています 同じ幅の 要素を複数行配置し、 幅が等しく高さが等しくない の末尾に次の要素 を追加するページレイアウト方法 前の行の 要素を の下に短くします。
これにより、ページの複雑さが効果的に軽減され、多くのスペースが節約されます。さらに、ウォーターフォールフローの不均一な配置により、インターフェイスを通じてユーザーに複数のデータを表示でき、ユーザーは下にブラウズしたいという衝動にかられ、優れたユーザーエクスペリエンスを提供します。たとえば、タオバオのページではこのレイアウト方法が採用されています。

タオバオのウォーターフォールフローレイアウト

(モバイル版) と 実現したいレンダリング (PC 版) のレンダリングを紹介します。)~

JS を使用してウォーターフォールフローレイアウトを実装する方法を段階的に説明します。

思考の準備

ウォーターフォールフローのレイアウトを理解して、コードを書きやすくするために実装手順を整理しましょう。

1. まず、

たくさんの写真

(私は40枚の写真を用意しました) と vscode 開発ツールを準備する必要があります。 2.

フロントエンド

コードを記述し、スタイル を画像 に追加して、画像 が同じ幅で同じ行に表示されるようにします。 。 3.

コードを記述します。最初の行の画像の数、次の画像のシリアル番号を知る必要があります。および 前の行最も短い要素のシーケンス番号 と位置。 Text

1. フロントエンドコードの記述

1. まず、

all を保持する
container コンテナを定義します。 image、box コンテナを使用して box-img コンテナをロードし、このコンテナに 各画像 をロードします。これにより、後でスタイルを記述しやすくなります。

2. 画像

を同じ行に表示します - ボックスコンテナーの
float:left; 属性 を使用します。
3. 画像

を同じ幅で表示します -

width:150px;
を box-img コンテナーに設定し、img タグ # を設定します## width:100%;親コンテナ box-img の高さの 100% を継承します。 4. エフェクトの見栄えを良くするために、画像を保持するコンテナに パディング、ボーダー、シャドウ
エフェクトを設定します。

完全なフロントエンドコードが添付されています:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>waterFall</title>
    <script src="./index.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container {
        overflow: hidden;
        position: relative;
    }
    .box{
        float: left;
        padding: 5px;
    }
    .box-img{
        width: 150px;
        padding: 5px;
        border: 1px solid #484848;
        box-shadow: 0 0 5px #484848;
    }
    .box-img img{
        width: 100%;
    }
</style>
<body>
    <div id="container">
        <div>
            <div>
                <img src="./img/1.jpg" alt="">
           </div>
        </div>
        /*.......后面接39个box，此处省略*/
    </div>
    
</body>
</html>

ログイン後にコピー

2. JS コードの記述

1. まず、window.onload=function(){} を使用します。ページをロードします。完了直後に実行される関数

この関数では、

imgLocation('container','box') 関数

を呼び出して、最終的な効果と実際の効果を示します。渡されるパラメータは

です。親コンテナ

'container' と、イメージを保持する

子コンテナ 'box' です。

window.onload=function() {
    imgLocation(&#39;container&#39;,&#39;box&#39;)
}

ログイン後にコピー

2. imgLocation() 関数を実装します 1) まず、配置するすべての画像を取得する必要があります

そして、それらを

配列に保存する必要があります

中

`document.getElementById(parent) を使用して親コンテナを取得します。`getChildElement(cparent,content) メソッド

を呼び出します。このメソッドでは、最初に getChildElement(cparent,content) メソッドを呼び出します。

親コンテナのすべてのタグ

、すべてのタグ

を走査し、if条件文を使用して、クラス名がboxのコンテナを取得します(画像を保持するコンテナ)を保存してください。自分で作成した配列に を入力すると、戻り値がこの配列になります。これにより、後でトラバーサルを通じて画像の位置を操作することが容易になります。

function imgLocation(parent,content){
    var cparent=document.getElementById(parent)
    //cparent下的所有的第一层的子容器 box
    var ccontent=getChildElement(cparent,content)//数组，40个div
}

//取到父容器中的某一层子容器
function getChildElement(parent,content){
    var contentArr=[]
    var allContent=parent.getElementsByTagName(&#39;*&#39;)//通过标签来选中得到一个数组
    //遍历allContent把其中类名为content的容器都存到contentArr数组中
    for(var i=0;i<allContent.length;i++){
        if(allContent[i].className==content){    //当前这个容器的类名是否为content
            contentArr.push(allContent[i])
        }
    }
    return contentArr;

}

ログイン後にコピー

2) この array を取得した後、starts

が ## に

を配置する必要があるであることを確認します。 # 位置次の方法を使用します。最初に `ウィンドウの幅` と

各画像の幅

を取得し、その 2 つを除算します。

切り捨て

により、最初の行に配置できる 写真の数 が得られます。当然、必要な写真の シリアル番号 もわかります。操作。

    //从谁开始是需要被摆放位置的
    var winWidth=document.documentElement.clientWidth;//视窗宽度
    var imgWidth=ccontent[0].offsetWidth;//图片宽度

    var num=Math.floor(winWidth/imgWidth)//第一行能放几张图

ログイン後にコピー

3）得到需要`被摆放`位置的图片序号后，确定其`摆放位置`

我们自己定义一个存储高度的数组，对前一行元素的高度进行遍历并存入数组，当遍历到需要被摆放位置的图片时，用Math.min()方法获取前一行高度最矮的元素高度，并用indexOf()方法获取到其下标。

再对我们所操作的这个图片容器的样式调整：
position：absolute;绝对定位，top值设置为前一行高度最矮的图片高度minHeight，left值设置为单张图片宽度乘这张图片的下标minIndex。

最后，不要忘啦，摆放好图片后，还要更新摆放的那一列的高度哟~

    //操作num+1张图
    var BoxHeightArr=[]
    for(var i=0;i<ccontent.length;i++){
        //前num张只要计算高度
        if(i<num){
            BoxHeightArr[i]=ccontent[i].offsetHeight
        }
        else{
            //我们要操作的box  :ccontent[i]
            var minHeight=Math.min.apply(null,BoxHeightArr)//apply:把最小值这个方法借给它用
            var minIndex=BoxHeightArr.indexOf(minHeight)//返回数组下标
            ccontent[i].style.position=&#39;absolute&#39;//style设置样式
            ccontent[i].style.top=minHeight+&#39;px&#39;
            ccontent[i].style.left=imgWidth*minIndex+&#39;px&#39;

            //更新最矮的那一列的高度
            BoxHeightArr[minIndex]+=ccontent[i].offsetHeight
        }
    }

ログイン後にコピー

最终整合一下就可以实现瀑布流的布局效果啦！

最后

以上就是瀑布流布局的实现过程，看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。

推荐学习：《JavaScript视频教程》

以上がJS を使用してウォーターフォールフローレイアウトを実装する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。