JSでウォーターフォールフロー効果を実現する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JSでウォーターフォールフロー効果を実現する方法

一个新手

Sep 08, 2017 am 11:44 AM

javascript 効果

今日は時間をかけて滝の流れの効果について記事を書きます。 iOS に携わったことがある人なら誰でも、ウォーターフォールフローも iOS で非常に人気のあるレイアウト方法であることを知っているので、ここでは紹介しません。 JS を使用して滝の流れの効果を実現する方法を見てみましょう。

コードを入力したところ、中のコメントは非常に明確でした。わからない場合は、私に聞いてください。

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--父标签-->
    <p id="main">
        <p class="box">
            <p class="pit">
                <img src="images/0.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/1.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/2.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/3.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/4.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/5.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/6.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/7.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/8.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/9.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/10.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/11.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/12.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/13.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/14.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/15.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/16.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/17.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/18.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/19.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/20.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/21.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/22.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/23.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/24.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/25.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/26.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/27.jpg">
            </p>
        </p>
    </p>

    <script src="js/index.js" type="text/javascript"></script>
</body>
</html>

ログイン後にコピー

CSS:

a, address, b, big, blockquote, body, center, cite, code, dd, del, p, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

#main {
    position: relative;
}

#main .box {
    padding: 15px 0 0 15px;
    float: left;
}

#main .box .pit {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 2px gray;
    width: 165px;
}

#main .box .pit img {
    width: 165px;
}

ログイン後にコピー

JS:

/**
 * Created by huminghao on 2017/7/5.
 */
function $(id) {
    return typeof id === &#39;string&#39; ? document.getElementById(id) : id;
}

// 当页面加载完毕
window.onload = function () {
    // 实现瀑布流
    waterFlow(&#39;main&#39;, &#39;box&#39;);

    // 监听页面的滚动
    window.onscroll = function () {
        // 判断是否具备加载图片的条件
        if (checkWillLoadImg()) {
            // 造数据
            var dataImg = {&#39;data&#39; : [{&#39;src&#39; : &#39;0.jpg&#39;}, {&#39;src&#39; : &#39;1.jpg&#39;},{&#39;src&#39; : &#39;2.jpg&#39;},{&#39;src&#39; : &#39;3.jpg&#39;},{&#39;src&#39; : &#39;4.jpg&#39;},{&#39;src&#39; : &#39;5.jpg&#39;},{&#39;src&#39; : &#39;6.jpg&#39;},{&#39;src&#39; : &#39;7.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;}]}

            for (var i = 0; i < dataImg.data; i ++) {
                // 创建最外层的盒子
                var newBox = document.createElement(&#39;p&#39;);
                newBox.className = &#39;box&#39;;
                $(&#39;main&#39;).appendChild(newBox);

                // 创建里面的盒子
                var newPic = document.createElement(&#39;p&#39;);
                newPic.className = &#39;pic&#39;;
                newBox.appendChild(newPic);

                // 创建图片
                var newImg = document.createElement(&#39;img&#39;);
                newImg.src = &#39;images/&#39; + dataImg.data[i].src;
                newPic.appendChild(newImg);
            }
        }
    }

}


// 实现瀑布流
function waterFlow(parent, box) {
    // 让所有盒子的父标签居中
    // 1.拿到所有的盒子
    var allBoxs = $(parent).getElementsByClassName(box);

    // 2.拿到其中一个盒子的宽度
    var boxWidth = allBoxs[0].offsetWidth;

    // 3.求出页面的宽度
    var screenWidth = document.body.clientWidth;

    // 4.求出列数
    var clos = Math.floor(screenWidth / boxWidth);

    // 5.让父标签居中
    $(parent).style.cssText = &#39;width: &#39; + clos * boxWidth + &#39;px; margin: 0 auto&#39;;


    // 定位
    // 定义一个高度数组
    var heightArray = [];

    // 遍历
    for (var i = 0; i < allBoxs.length; i ++) {
        // 求出所有盒子的高度
        var boxHeight = allBoxs[i].offsetHeight;

        if (i<clos) { // 第一行
            heightArray.push(boxHeight);

            console.log(heightArray);
        }else { // 剩余行
            // 取出最矮盒子
            var minBoxHeight = Math.min.apply(null, heightArray);
            // 取出最矮盒子对应的索引
            var minBoxIndex = getMinIndex(minBoxHeight, heightArray);
            // 对剩余的盒子进行定位
            allBoxs[i].style.position = &#39;absolute&#39;;
            allBoxs[i].style.top = minBoxHeight + &#39;px&#39;;
            allBoxs[i].style.left = minBoxIndex * boxWidth + &#39;px&#39;;

            // 替换高度
            heightArray[minBoxIndex] = minBoxHeight + boxHeight;
        }
    }
}


// 求出最矮盒子在数组中的索引
function getMinIndex(value, array) {
    for (var i = 0; i < array.length; i ++) {
        if (value == array[i]) {
            return i;
        }
    }
}

// 判断是否具备加载图片的条件
function checkWillLoadImg() {
    // 拿到所有的盒子
    var allBoxs = $(&#39;main&#39;).getElementsByClassName(&#39;box&#39;);

    // 取出最后一个盒子
    var lastBox = allBoxs[allBoxs.length - 1];

    // 求出最后一个盒子高度的一半 + 头部偏移的位置
    var lastBoxHeightDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 求出屏幕的高度
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;

    // 求出页面偏离浏览器的高度
    var offSetTop = document.body.offsetTop || document.documentElement.offsetTop;
    console.log(lastBoxHeightDis, screenHeight, offSetTop);

    return lastBoxHeightDis < (offSetTop + screenHeight) ? true : false;
}

ログイン後にコピー

以上がJSでウォーターフォールフロー効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7644

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

152

Related knowledge

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する Apr 03, 2024 am 08:13 AM

スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマートウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました

九州風神アサシン4Sラジエターレビュー空冷「アサシンマスター」スタイル Mar 28, 2024 am 11:11 AM

ASSASSINといえば、プレイヤーの皆さんは必ず『アサシンクリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンスブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です Apr 17, 2024 pm 05:07 PM

春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。

Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Mar 28, 2024 pm 03:20 PM

コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナレベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。

4K HD映像がわかりやすい！この大規模なマルチモーダルモデルは、Web ポスターのコンテンツを自動的に分析するため、作業者にとって非常に便利です。 Apr 23, 2024 am 08:04 AM

PDF、Web ページ、ポスター、Excel グラフの内容を自動的に分析できる大型モデルは、アルバイトにとってはあまり便利ではありません。上海 AILab、香港中文大学、その他の研究機関が提案した InternLM-XComposer2-4KHD (略称 IXC2-4KHD) モデルは、これを実現します。解像度制限が 1500x1500 以下である他のマルチモーダル大型モデルと比較して、この作業ではマルチモーダル大型モデルの最大入力画像が 4K (3840x1600) 解像度を超え、任意のアスペクト比と 336 ピクセルをサポートし、 4K 動的解像度の変更。発売から3日後、このモデルはHuggingFaceのビジュアル質疑応答モデルの人気ランキングで1位となった。扱いやすい

Colorful Hidden Star P15 24 レビュー：見た目も性能も兼ね備えたハードコアなオールラウンドゲーミングノートPC Mar 06, 2024 pm 04:40 PM

現在の急速な技術発展の時代において、ラップトップは人々の日常生活や仕事に欠かせない重要なツールとなっています。高いパフォーマンス要件を持つプレーヤーにとって、強力な構成と優れたパフォーマンスを備えたラップトップは、彼らのハードコアなニーズを満たすことができます。 Colorful Hidden Star P15 ノートブックコンピューターは、その優れたパフォーマンスと見事なデザインにより、将来のリーダーとなり、ハードコアノートブックのモデルと呼ぶことができます。 Colorful Hidden Star P1524 は、第 13 世代インテル Core i7 プロセッサーと RTX4060Laptop GPU を搭載し、よりファッショナブルな宇宙船デザインスタイルを採用し、細部まで優れたパフォーマンスを発揮します。まずはこの手帳の特徴を見ていきましょう。 Supreme は Intel Core i7-13620H 処理を搭載

iQOO Neo9S Pro+ 画面の簡単な分析。 Jul 19, 2024 pm 03:53 PM

今日のスマートフォン市場では、画面の品質が携帯電話の全体的なパフォーマンスを測定するための重要な指標の 1 つとなっています。 iQOO の Neo シリーズは、ユーザーに優れたゲーム体験と視覚的な楽しみを提供することに常に注力してきました。最新の製品である iQOO Neo9SPro+ は、「スリーグッドアイプロテクションゲーミングスクリーン」を採用しています。次に、このスクリーンの品質を見てみましょう。 iQOO Neo9S Pro+ には、1.5 KOLED e-sports ダイレクトスクリーンが装備されており、1Hz ～ 144Hz のフラッグシップ LTPO アダプティブリフレッシュレートをサポートしています。つまり、静的コンテンツを表示するときに超低電力スタンバイ状態を実現でき、インテリジェントな表示も可能です。ゲーム中は90Hzから144Hzのダイナミックハイに切り替えます。

NIKKOR Z 28-400mm f/4-8 VR レンズによる真のワンレンズ体験 Mar 28, 2024 pm 02:54 PM

多くの写真愛好家はレンズを使用することを好みますが、撮影ニーズは非常に変化しやすいため、レンズの選択に関しては、より汎用性の高い製品、いわゆる「1 つのレンズで世界を征服する」レンズを好みます。折しもニコンから新製品、まさに「1本で世界を征服できる」レンズ、NIKKOR Z28-400mmf/4-8VRレンズが発売されました。広角端28mmから望遠端400mmまでをカバーし、Zマウントカメラを搭載することで、非常に豊富な撮影テーマや豊かな視点の変化を簡単に撮影できます。今回はこのNIKKOR Z28-400mmf/4-8VRレンズについて、最近の使用体験を通してお話していきたいと思います。 NIKKOR Z28-400mmf/4-8VRは

See all articles

JSでウォーターフォールフロー効果を実現する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック