How to use Layui to achieve the waterfall flow display effect of pictures

Waterfall flow layout is a common web page layout, which is very common when displaying a list of pictures or a list of products. This article will introduce how to use the Layui framework to achieve the waterfall flow display effect of images.

1. Introduce the Layui framework

First, we need to introduce the CSS and JS files of the Layui framework into the HTML page. It can be imported through CDN or downloaded locally. Suppose we place the Layui framework file in the layui folder of the project, the code is as follows:

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

2. HTML structure

Next, we need to create a container to Image showing waterfall flow layout. We can use the <ul> tag as a container and create a <li> tag for each image. The code is as follows:

<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="How to use Layui to achieve picture waterfall flow display effect" >
        <div class="info">圖片1描述</div>
    </li>
    <li class="layui-col-xs4">
        <img  src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="How to use Layui to achieve picture waterfall flow display effect" >
        <div class="info">圖片2描述</div>
    </li>
    ...
</ul>

The .layui-row and .layui-col-space10 here are the grid system styles provided by Layui, used to implement responsive layout . .layui-row represents a row, .layui-col-xs4 represents a column, and the number 4 represents the width ratio occupied by this column. By adjusting this ratio, we can control the number of images displayed in each row.

3. Dynamically load images

In order to achieve the waterfall flow effect, we need to dynamically calculate the height of each image when the page is loaded, and adjust the position of the image container. This can be achieved using JavaScript.

First, we need to call a JavaScript function when the page is loaded to implement the function of dynamically loading images. We can use Layui's official extension module laypage to load images asynchronously. The code is as follows:

layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage;
    var layer = layui.layer;
    
    laypage.render({
        elem: 'waterfall',
        count: 50, // 數(shù)據(jù)總數(shù)
        limit: 10, // 每頁顯示的數(shù)量
        jump: function(obj, first){
            // 首次加載和分頁切換時(shí)都會(huì)觸發(fā)此函數(shù)
            // obj包含了當(dāng)前的頁碼、每頁顯示的數(shù)量等信息
            
            if (!first) {
                // 非首次加載時(shí)執(zhí)行
                
                // 模擬異步加載數(shù)據(jù)，實(shí)際開發(fā)中應(yīng)從后臺(tái)獲取數(shù)據(jù)
                setTimeout(function(){
                    // 獲取當(dāng)前頁的起始索引和結(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="How to use Layui to achieve picture waterfall flow display effect" >';
        html += '<div class="info">' + data[i].info + '</div>';
        html += '</li>';
    }
    $('#waterfall').html(html);
}

In the laypage.render function, we specify the container element of the image list as waterfall, and pass count and The limit attribute specifies the total number of data and the amount displayed per page. In the jump function, we calculate the starting index and ending index of obtaining image data from the background based on the current page number and the number displayed on each page, and simulate the data from the background through the getData function retrieve data. In the renderImages function, we render the obtained image data into the page.

4. CSS Style

Finally, we need to add some CSS styles to the image container and description information to achieve the waterfall flow effect. The code is as follows:

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

The above is the whole process of using the Layui framework to achieve the waterfall flow display effect of images. By introducing the Layui framework, creating an HTML structure, dynamically loading images and adjusting container positions, and adding CSS styles, we can easily implement a beautiful image waterfall layout.

Hope this article is helpful to you!

The above is the detailed content of How to use Layui to achieve picture waterfall flow display effect. For more information, please follow other related articles on the PHP Chinese website!