How to use Layui to achieve picture waterfall flow display effect

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></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/imghwm/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/imghwm/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, // 数据总数
        limit: 10, // 每页显示的数量
        jump: function(obj, first){
            // 首次加载和分页切换时都会触发此函数
            // obj包含了当前的页码、每页显示的数量等信息
            
            if (!first) {
                // 非首次加载时执行
                
                // 模拟异步加载数据，实际开发中应从后台获取数据
                setTimeout(function(){
                    // 获取当前页的起始索引和结束索引
                    var start = (obj.curr - 1) * obj.limit;
                    var end = obj.curr * obj.limit;
                    
                    // 模拟从后台获取数据
                    var data = getData(start, end);
                    
                    // 渲染图片列表
                    renderImages(data);
                }, 500);
            }
        }
    });
});

function getData(start, end) {
    // 模拟从后台获取数据
    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!