So erzielen Sie einen Wasserfall-Flow-Effekt in JS-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So erzielen Sie einen Wasserfall-Flow-Effekt in JS

一个新手

Sep 08, 2017 am 11:44 AM

javascript 效果

Ich werde mir heute die Zeit nehmen, einen weiteren Artikel über die Wirkung des Wasserfallflusses zu schreiben. Jeder, der mit iOS gearbeitet hat, weiß, dass der Wasserfallfluss auch in iOS eine sehr beliebte Layoutmethode ist, daher werde ich ihn hier nicht vorstellen. Schauen wir uns an, wie man mit JS den Wasserfall-Flow-Effekt erzielt.

Ich habe den Code gerade direkt eingegeben und die darin enthaltenen Kommentare sind sehr klar. Wenn Sie es nicht verstehen, können Sie mich fragen.

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Wasserfall-Flow-Effekt in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung

1 Monate vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

3 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7644

CakePHP-Tutorial

1392

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

152

Related knowledge

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Apr 03, 2024 am 08:13 AM

Möglicherweise sind Sie schon einmal auf das Problem gestoßen, dass auf dem Bildschirm Ihres Smartphones grüne Linien erscheinen. Auch wenn Sie es noch nie gesehen haben, müssen Sie entsprechende Bilder im Internet gesehen haben. Haben Sie schon einmal erlebt, dass der Bildschirm einer Smartwatch weiß wird? Am 2. April erfuhr CNMO aus ausländischen Medien, dass ein Reddit-Benutzer ein Bild auf der sozialen Plattform geteilt hatte, auf dem zu sehen war, wie der Bildschirm der Smartwatches der Samsung Watch-Serie weiß wurde. Der Benutzer schrieb: „Ich war gerade dabei, aufzuladen, und als ich zurückkam, war es so. Ich habe versucht, neu zu starten, aber der Bildschirm der Samsung Watch wurde beim Neustart immer noch weiß.“ Der Reddit-Benutzer hat das Smartwatch-spezifische Modell nicht angegeben. Dem Bild nach zu urteilen dürfte es sich jedoch um eine Samsung Watch5 handeln. Zuvor hatte sich auch ein anderer Reddit-Benutzer gemeldet

Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil Mar 28, 2024 am 11:11 AM

Apropos ASSASSIN: Ich glaube, die Spieler werden in „Assassin’s Creed“ definitiv an die Meisterassassinen denken. Sie sind nicht nur geschickt, sondern haben auch das Credo, „sich der Dunkelheit zu widmen und dem Licht zu dienen“. bekanntes Haushaltsgehäuse/Stromversorgung/Kühlung Die luftgekühlten Flaggschiff-Heizkörper der ASSASSIN-Serie der Gerätemarke DeepCool stimmen überein. Vor kurzem wurde das neueste Produkt dieser Serie, ASSASSIN4S, auf den Markt gebracht: „Assassin in Suit, Advanced“ bietet fortgeschrittenen Spielern ein neues Luftkühlungserlebnis. Das Erscheinungsbild ist voller Details. Die Außenseite ist mit einer würfelförmigen Verkleidung versehen, die in den Farben Weiß und Schwarz erhältlich ist Farben, um verschiedene Farben zu treffen

Exquisite Licht- und Schattenkunst im Frühling, Haqu H2 ist die kostengünstige Wahl Apr 17, 2024 pm 05:07 PM

Mit der Ankunft des Frühlings erwacht alles zum Leben und alles ist voller Lebenskraft und Vitalität. Wie können Sie Ihrem Zuhause in dieser schönen Jahreszeit einen Hauch von Farbe verleihen? Der Haqu H2-Projektor ist mit seinem exquisiten Design und seiner hervorragenden Kosteneffizienz in diesem Frühling zu einer unverzichtbaren Schönheit geworden. Dieser H2-Projektor ist kompakt und dennoch stilvoll. Ob auf dem Fernsehschrank im Wohnzimmer oder neben dem Nachttisch im Schlafzimmer platziert, es kann zu einer wunderschönen Landschaft werden. Sein Gehäuse besteht aus einer milchig-weißen, matten Textur, die dem Projektor nicht nur ein fortschrittlicheres Aussehen verleiht, sondern auch den Tragekomfort erhöht. Das beigefarbene Material mit Lederstruktur verleiht dem Gesamtbild einen Hauch von Wärme und Eleganz. Diese Kombination aus Farben und Materialien entspricht nicht nur dem ästhetischen Trend moderner Häuser, sondern lässt sich auch integrieren

Test des Vollmodul-Netzteils Huntkey MX750P: 750 W geballte Platin-Stärke Mar 28, 2024 pm 03:20 PM

Mit ihrer kompakten Größe hat die ITX-Plattform viele Spieler angezogen, die nach ultimativer und einzigartiger Schönheit streben. Mit der Verbesserung der Herstellungsprozesse und technologischen Fortschritten können sowohl Intels Core- als auch RTX40-Grafikkarten der 14. Generation ihre Stärke auf der ITX-Plattform ausspielen Auch Gamer stellen höhere Anforderungen an die SFX-Stromversorgung. Der Spiele-Enthusiast Huntkey hat ein neues Netzteil der MX-Serie auf den Markt gebracht, das hohe Leistungsanforderungen erfüllt. Das Vollmodul-Netzteil MX750P verfügt über eine Nennleistung von bis zu 750 W und hat die 80PLUS-Platin-Zertifizierung bestanden. Nachfolgend bringen wir die Bewertung dieses Netzteils. Das Vollmodul-Netzteil Huntkey MX750P verfügt über ein einfaches und modisches Designkonzept. Es stehen zwei Modelle in Schwarz und Weiß zur Auswahl. Beide verfügen über eine matte Oberflächenbehandlung und haben eine gute Textur mit silbergrauen und roten Schriftarten.

4K-HD-Bilder ganz einfach verstehen! Dieses große multimodale Modell analysiert automatisch den Inhalt von Webplakaten und ist damit für Mitarbeiter sehr praktisch. Apr 23, 2024 am 08:04 AM

Ein großes Modell, das den Inhalt von PDFs, Webseiten, Postern und Excel-Diagrammen automatisch analysieren kann, ist für Mitarbeiter nicht besonders praktisch. Das von Shanghai AILab, der Chinesischen Universität Hongkong und anderen Forschungseinrichtungen vorgeschlagene Modell InternLM-XComposer2-4KHD (abgekürzt IXC2-4KHD) macht dies Wirklichkeit. Im Vergleich zu anderen multimodalen großen Modellen, deren Auflösungsgrenze nicht mehr als 1500 x 1500 beträgt, erhöht diese Arbeit das maximale Eingabebild multimodaler großer Modelle auf eine Auflösung von über 4K (3840 x 1600) und unterstützt jedes Seitenverhältnis und 336 Pixel bis 4K Dynamische Auflösungsänderungen. Drei Tage nach seiner Veröffentlichung stand das Modell an der Spitze der Beliebtheitsliste der visuellen Frage-Antwort-Modelle von HuggingFace. Einfach zu bedienen

Colorful Hidden Star P15 24 Test: Ein hartgesottener Allround-Gaming-Laptop mit gutem Aussehen und guter Leistung Mar 06, 2024 pm 04:40 PM

In der heutigen Zeit der rasanten technologischen Entwicklung sind Laptops zu einem unverzichtbaren und wichtigen Werkzeug im täglichen Leben und bei der Arbeit der Menschen geworden. Für Spieler mit hohen Leistungsanforderungen kann ein Laptop mit leistungsstarker Konfiguration und hervorragender Leistung ihre Kernanforderungen erfüllen. Mit seiner hervorragenden Leistung und seinem atemberaubenden Design hat sich der Notebook-Computer Colorful Hidden Star P15 zum Spitzenreiter der Zukunft entwickelt und kann als Modell unter den Hardcore-Notebooks bezeichnet werden. Das Colorful Hidden Star P1524 ist mit einem Intel Core i7-Prozessor der 13. Generation und einer RTX4060Laptop-GPU ausgestattet. Es übernimmt einen modischeren Raumschiff-Designstil und bietet eine hervorragende Leistung im Detail. Werfen wir zunächst einen Blick auf die Features dieses Notebooks. Der Supreme wird von der Intel Core i7-13620H-Verarbeitung angetrieben

Der Bildschirm eignet sich gut zum Spielen. Kurze Analyse des iQOO Neo9S Pro+-Bildschirms Jul 19, 2024 pm 03:53 PM

Auf dem heutigen Smartphone-Markt ist die Bildschirmqualität zu einem der Schlüsselindikatoren zur Messung der Gesamtleistung eines Mobiltelefons geworden. Die Neo-Serie von iQOO ist seit jeher bestrebt, den Benutzern ein hervorragendes Spielerlebnis und visuellen Genuss zu bieten. Als nächstes werfen wir einen Blick auf die Qualität dieses Bildschirms. iQOO Neo9S Pro+ ist mit einem 1,5-KOLED-E-Sports-Direktbildschirm ausgestattet, der die adaptive Bildwiederholfrequenz des Flaggschiff-LTPO von 1 Hz bis 144 Hz unterstützt, was bedeutet, dass er bei der Anzeige statischer Inhalte einen Standby-Zustand mit extrem geringem Stromverbrauch erreichen kann und außerdem intelligent sein kann Wechseln Sie beim Spielen auf dynamisch hoch von 90 Hz auf 144 Hz

Ein echtes Ein-Objektiv-Erlebnis mit dem NIKKOR Z 28–400 mm f/4–8 VR-Objektiv Mar 28, 2024 pm 02:54 PM

Viele Fotografie-Enthusiasten verwenden gerne Objektive. Ihre Aufnahmebedürfnisse sind sehr wechselhaft. Wenn es um die Objektivauswahl geht, bevorzugen sie ein vielseitigeres Produkt, das wir gemeinhin als „ein Objektiv, um die Welt zu erobern“ bezeichnen. Zufällig hat Nikon ein neues Produkt auf den Markt gebracht, das NIKKOR Z28-400mmf/4-8VR-Objektiv, ein echtes „Ein-Objektiv, das die Welt erobern kann“. Das Objektiv deckt den Bereich vom 28-mm-Weitwinkelbereich bis zum 400-mm-Telebereich ab. Ausgestattet mit seiner Z-Mount-Kamera kann es problemlos eine sehr breite Palette an Fotothemen aufnehmen und einen reichhaltigen Perspektivwechsel bewirken. Heute werden wir anhand unserer jüngsten Nutzungserfahrungen mit Ihnen über dieses NIKKOR Z28-400mmf/4-8VR-Objektiv sprechen. NIKKOR Z28-400mmf/4-8VR ist

See all articles