Comment utiliser Layui pour obtenir l'effet d'affichage du flux en cascade des images

La mise en page en cascade est une mise en page de page Web courante, ce qui est très courant lors de l'affichage d'une liste d'images ou d'une liste de produits. Cet article explique comment utiliser le framework Layui pour obtenir l'effet d'affichage en cascade des images.

1. Présentez le framework Layui

Tout d'abord, nous devons introduire les fichiers CSS et JS du framework Layui dans la page HTML. Il peut être importé via CDN ou téléchargé localement. Supposons que nous placions le fichier framework Layui dans le dossier layui du projet. Le code est le suivant?: layui文件夾中，代碼如下：

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

二、HTML結(jié)構(gòu)

接下來(lái)，我們需要?jiǎng)?chuàng)建一個(gè)容器來(lái)展示瀑布流布局的圖片。我們可以使用<ul>標(biāo)簽來(lái)作為容器，并為每個(gè)圖片創(chuàng)建一個(gè)<li>標(biāo)簽。代碼如下：

<ul class="layui-row layui-col-space10" id="waterfall">
    <li class="layui-col-xs4">
        <img  src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Comment utiliser Layui pour obtenir un effet d'affichage de flux de cascade d'images" >
        <div class="info">圖片1描述</div>
    </li>
    <li class="layui-col-xs4">
        <img  src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Comment utiliser Layui pour obtenir un effet d'affichage de flux de cascade d'images" >
        <div class="info">圖片2描述</div>
    </li>
    ...
</ul>

這里的.layui-row和.layui-col-space10是Layui提供的柵格系統(tǒng)樣式，用于實(shí)現(xiàn)響應(yīng)式布局。.layui-row表示一行，.layui-col-xs4表示一列，其中的數(shù)字4表示這一列占據(jù)的寬度比例。通過(guò)調(diào)整這個(gè)比例，我們可以控制每行顯示的圖片數(shù)量。

三、動(dòng)態(tài)加載圖片

為了實(shí)現(xiàn)瀑布流效果，我們需要在頁(yè)面加載時(shí)動(dòng)態(tài)計(jì)算每個(gè)圖片的高度，并調(diào)整圖片容器的位置。這可以通過(guò)使用JavaScript來(lái)實(shí)現(xiàn)。

首先，我們需要在頁(yè)面加載完成時(shí)調(diào)用一個(gè)JavaScript函數(shù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)加載圖片的功能。我們可以使用Layui的官方擴(kuò)展模塊laypage來(lái)實(shí)現(xiàn)異步加載圖片。代碼如下：

layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage;
    var layer = layui.layer;
    
    laypage.render({
        elem: 'waterfall',
        count: 50, // 數(shù)據(jù)總數(shù)
        limit: 10, // 每頁(yè)顯示的數(shù)量
        jump: function(obj, first){
            // 首次加載和分頁(yè)切換時(shí)都會(huì)觸發(fā)此函數(shù)
            // obj包含了當(dāng)前的頁(yè)碼、每頁(yè)顯示的數(shù)量等信息
            
            if (!first) {
                // 非首次加載時(shí)執(zhí)行
                
                // 模擬異步加載數(shù)據(jù)，實(shí)際開(kāi)發(fā)中應(yīng)從后臺(tái)獲取數(shù)據(jù)
                setTimeout(function(){
                    // 獲取當(dāng)前頁(yè)的起始索引和結(jié)束索引
                    var start = (obj.curr - 1) * obj.limit;
                    var end = obj.curr * obj.limit;
                    
                    // 模擬從后臺(tái)獲取數(shù)據(jù)
                    var data = getData(start, end);
                    
                    // 渲染圖片列表
                    renderImages(data);
                }, 500);
            }
        }
    });
});

function getData(start, end) {
    // 模擬從后臺(tái)獲取數(shù)據(jù)
    var data = [];
    for (var i = start; i < end; i++) {
        data.push({
            src: 'image' + (i + 1) + '.jpg',
            info: '圖片' + (i + 1) + '描述'
        });
    }
    return data;
}

function renderImages(data) {
    var html = '';
    for (var i = 0; i < data.length; i++) {
        html += '<li class="layui-col-xs4">';
        html += '<img  src="' + data[i].src + '" alt="Comment utiliser Layui pour obtenir un effet d'affichage de flux de cascade d'images" >';
        html += '<div class="info">' + data[i].info + '</div>';
        html += '</li>';
    }
    $('#waterfall').html(html);
}

在laypage.render函數(shù)中，我們指定了圖片列表的容器元素為waterfall，并通過(guò)count和limit屬性指定了數(shù)據(jù)總數(shù)和每頁(yè)顯示的數(shù)量。在jump函數(shù)中，我們根據(jù)當(dāng)前的頁(yè)碼和每頁(yè)顯示的數(shù)量來(lái)計(jì)算從后臺(tái)獲取圖片數(shù)據(jù)的起始索引和結(jié)束索引，并通過(guò)getData函數(shù)模擬從后臺(tái)獲取數(shù)據(jù)。在renderImages

#waterfall {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#waterfall li {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    background-color: #f2f2f2;
    padding: 10px;
    box-sizing: border-box;
}

#waterfall img {
    width: 100%;
    height: auto;
}

#waterfall .info {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

2. Structure HTML

Ensuite, nous devons créer un conteneur pour afficher la mise en page en cascade. image. Nous pouvons utiliser la balise <ul> comme conteneur et créer une balise <li> pour chaque image. Le code est le suivant?:

rrreee

Les .layui-row et .layui-col-space10 voici les styles de système de grille fournis par Layui, qui sont utilisés pour implémenter mise en page réactive. .layui-row représente une ligne, .layui-col-xs4 représente une colonne et le chiffre 4 qu'il contient représente la proportion de la largeur occupée par cette colonne. En ajustant ce rapport, nous pouvons contr?ler le nombre d'images affichées dans chaque ligne.

3. Charger dynamiquement les images

Afin d'obtenir l'effet de flux en cascade, nous devons calculer dynamiquement la hauteur de chaque image lorsque la page est chargée et ajuster la position du conteneur d'images. Ceci peut être réalisé en utilisant JavaScript. ????Tout d'abord, nous devons appeler une fonction JavaScript lorsque la page est chargée pour implémenter la fonction de chargement dynamique des images. Nous pouvons utiliser le module d'extension officiel de Layui laypage pour charger des images de manière asynchrone. Le code est le suivant?: ??rrreee??Dans la fonction laypage.render, nous spécifions l'élément conteneur de la liste d'images comme waterfall, et passons count code> et limite précise le nombre total de données et la quantité affichée par page. Dans la fonction jump, nous calculons l'index de début et l'index de fin d'obtention des données d'image de l'arrière-plan en fonction du numéro de page actuel et du numéro affiché sur chaque page, et nous le simulons via le getData Fonction Récupère les données de l'arrière-plan. Dans la fonction renderImages, nous restituons les données d'image obtenues dans la page. ????4. Styles CSS????Enfin, nous devons ajouter des styles CSS au conteneur d'image et aux informations de description pour obtenir l'effet de flux en cascade. Le code est le suivant?: ??rrreee??Ce qui précède est l'ensemble du processus d'utilisation du framework Layui pour obtenir l'effet d'affichage du flux en cascade des images. En introduisant le framework Layui, en créant une structure HTML, en chargeant dynamiquement les images, en ajustant la position des conteneurs et en ajoutant des styles CSS, nous pouvons facilement implémenter une belle mise en page en cascade d'images. ????J'espère que cet article vous sera utile?! ??

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!