Ajar anda langkah demi langkah cara melaksanakan susun atur aliran air terjun menggunakan js-tutorial js-php.cn

Artikel ini membawakan anda pengetahuan yang berkaitan tentang JavaScript terutamanya tentang cara menggunakan js untuk melaksanakan reka letak aliran air terjun. Rakan-rakan yang berminat boleh lihat di bawah. Bermanfaat.

Membawa anda langkah demi langkah untuk menakluk susun atur aliran air terjun

Kata Pengantar

Susun atur aliran air terjun ialah lebih popular sekarang Kaedah reka letak halaman, iaitu, 多行等宽 elemen disusun, 等宽不等高, dan elemen berikut 依次 ditambah pada elemen 前一行最矮 daripada 下方.

Ia boleh mengurangkan kerumitan halaman dengan berkesan dan menjimatkan banyak ruang selain itu, susunan aliran air terjun yang tidak sekata boleh memaparkan berbilang keping data kepada pengguna melalui antara muka, dan membolehkan pengguna ke Terdapat keinginan untuk menyemak imbas ke bawah, memberikan pengalaman pengguna yang hebat! Sebagai contoh, halaman Taobao menggunakan kaedah reka letak ini Biar saya tunjukkan kepada anda pemaparan reka letak aliran air terjun Taobao (versi mudah alih) dan pemaparan yang ingin kami capai (versi PC )~<.>

Ajar anda langkah demi langkah cara melaksanakan susun atur aliran air terjun menggunakan js

Persediaan pemikiran

Dengan memahami susun atur aliran air terjun, mari kita susun langkah untuk melaksanakannya bagi memudahkan penulisan kod kita.

1. Mula-mula kita perlu menyediakan

banyak gambar (saya sediakan 40 gambar di sini), dan vscode alatan pembangunan.

2 Tulis kod

bahagian hadapan dan tambah gaya pada imej supaya imej dipaparkan dalam lebar yang sama dan dalam baris selari .

3. Tulis kod

js, anda perlu tahu bilangan gambar dalam baris pertama, nombor siri gambar seterusnya dan baris sebelumnya Nombor jujukan elemen terpendek dan kedudukan peletakan .

Teks

1. Penulisan kod bahagian hadapan

1 Mula-mula, kami mentakrifkan
bekas untuk menyimpan semua. imej, gunakan kotak bekas untuk memuatkan kotak-img bekas dan kemudian muatkan setiap gambar dalam bekas ini, yang akan memudahkan penulisan gaya nanti.

2 Jadikan imej
muncul dalam baris yang sama dengan - gunakan atribut float:left; untuk bekas kotak.

3 Biarkan imej

dipaparkan dengan lebar yang sama
- tetapkan lebar:150px; untuk bekas img kotak, dan tetapkan teg img lebar:100%; Warisi 100% ketinggian kotak-img bekas induk.
4. Untuk menjadikan kesannya lebih kelihatan, kami menetapkan kesan

pelapik, sempadan dan bayang

untuk bekas yang memegang imej.
Kod bahagian hadapan yang lengkap dilampirkan:

2 Penulisan kod JS

<!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>

1. } untuk melaksanakan Fungsi yang dilaksanakan sejurus selepas halaman dimuatkan

Dalam fungsi ini, kami memanggil fungsi

imgLocation('bekas','kotak')

untuk membentangkan kesan akhir, dan parameter sebenar yang diluluskan ialah

Bekas induk'bekas' dan bekas kanak-kanak'kotak' yang menyimpan imej. 2. Laksanakan fungsi imgLocation()

window.onload=function() {
    imgLocation('container','box')
}

1) Mula-mula kita perlu

dan simpan dalam

`获取所有要摆放的图片`Gunakan dokumen .getElementById (induk) mendapat bekas induk; `数组`

memanggil kaedah

getChildElement(cparent,content)

Dalam kaedah ini, mula-mula dapatkan semua teg

bekas induk, dan kemudian Tag merentasi dan menggunakan pernyataan bersyarat if untuk mendapatkan bekas (bekas untuk imej) dengan kotak nama kelas, dan menyimpannya ke dalam kita membina diri kita Dalam tatasusunan , nilai pulangan ialah tatasusunan ini, yang sesuai untuk dilalui kemudian untuk memanipulasi kedudukan imej. 2) Selepas mendapat ini , ketahui di mana

perlukan

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('*')//通过标签来选中得到一个数组
    //遍历allContent把其中类名为content的容器都存到contentArr数组中
    for(var i=0;i<allcontent.length> kedudukan <h5 data-id="heading-9">
<code>数组</code> Kami menggunakan kaedah berikut: <code>从谁开始</code><code>被摆放</code>Dapatkan dahulu </h5>Lebar tingkap <p> dan </p>lebar setiap gambar <p>, bahagikan dua <strong></strong> dan <strong> bulatkan ke bawah </strong> untuk mendapatkan <strong> Baris pertama </strong> boleh meletakkan bilangan imej, dan secara semula jadi kita tahu <strong>nombor siri </strong> imej yang perlu <strong> beroperasi </strong>. <strong><pre class="brush:php;toolbar:false">    //从谁开始是需要被摆放位置的
    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><p>最终整合一下就可以实现瀑布流的布局效果啦！</p>
<h2 data-id="heading-11">最后</h2>
<p>以上就是瀑布流布局的实现过程，看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～<br>文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。</p>
<p>推荐学习：《<a href="https://www.php.cn/course/list/17.html" target="_blank">JavaScript视频教程</a>》<br></p></ccontent.length>

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara melaksanakan susun atur aliran air terjun menggunakan js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Ajar anda langkah demi langkah cara melaksanakan susun atur aliran air terjun menggunakan js

Kata Pengantar

imgLocation('bekas','kotak')

dan simpan dalam

获取所有要摆放的图片Gunakan dokumen .getElementById (induk) mendapat bekas induk; 数组

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

Artikel berkaitan

`获取所有要摆放的图片`Gunakan dokumen .getElementById (induk) mendapat bekas induk; `数组`

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