Layuiを使用して画像の滝の流れの表示効果を実現する方法

Layui を使用して写真の滝の流れの表示効果を実現する方法

滝の流れのレイアウトは一般的な Web ページのレイアウトであり、リストを表示するときに非常に一般的です。写真や商品リストなど。この記事では、Layui フレームワークを使用して画像の滝の流れの表示効果を実現する方法を紹介します。

1. Layui フレームワークを導入する

まず、Layui フレームワークの CSS ファイルと JS ファイルを HTML ページに導入する必要があります。 CDN 経由でインポートすることも、ローカルにダウンロードすることもできます。 Layui フレームワーク ファイルをプロジェクトの layui フォルダーに配置すると、コードは次のようになります:

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

2. HTML 構造

次に、ウォーターフォール フローのレイアウトを示す画像にコンテナーを追加します。 <ul></ul> タグをコンテナとして使用し、画像ごとに <li> タグを作成できます。コードは次のとおりです。

<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="Layuiを使用して画像の滝の流れの表示効果を実現する方法" >
        <div class="info">图片1描述</div>
    </li>
    <li class="layui-col-xs4">
        <img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="Layuiを使用して画像の滝の流れの表示効果を実現する方法" >
        <div class="info">图片2描述</div>
    </li>
    ...
</ul>

.layui-row と .layui-col-space10 は、Layui が提供するグリッド システム スタイルで、実装に使用されます。レスポンシブレイアウト 。 .layui-row は行を表し、.layui-col-xs4 は列を表し、数値 4 はこの列が占める幅の比率を表します。この比率を調整することで、各行に表示される画像の数を制御できます。

3. 画像を動的に読み込む

ウォーターフォール フロー効果を実現するには、ページが読み込まれるときに各画像の高さを動的に計算し、画像コンテナの位置を調整する必要があります。 。これは JavaScript を使用して実現できます。

まず、ページの読み込み時に JavaScript 関数を呼び出して、画像を動的に読み込む機能を実装する必要があります。 Layui の公式拡張モジュール laypage を使用して、画像を非同期的に読み込むことができます。コードは次のとおりです。

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="Layuiを使用して画像の滝の流れの表示効果を実現する方法" >';
        html += '<div class="info">' + data[i].info + '</div>';
        html += '</li>';
    }
    $('#waterfall').html(html);
}

laypage.render 関数では、画像リストのコンテナ要素を waterfall として指定し、count を渡します。 および limit 属性は、データの総数とページごとに表示される量を指定します。 jump 関数では、現在のページ番号と各ページに表示されている番号に基づいて、背景から画像データを取得する開始インデックスと終了インデックスを計算し、# を通じて背景からのデータをシミュレートします。 ##getData 関数はデータを取得します。 renderImages 関数では、取得した画像データをページにレンダリングします。

4. CSS スタイル

最後に、ウォーターフォール フロー効果を実現するために、いくつかの CSS スタイルを画像コンテナーと説明情報に追加する必要があります。コードは次のとおりです。

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

上記は、Layui フレームワークを使用して画像の滝の流れの表示効果を実現するプロセス全体です。 Layui フレームワークを導入し、HTML 構造を作成し、画像を動的に読み込んでコンテナの位置を調整し、CSS スタイルを追加することで、美しい画像のウォーターフォール レイアウトを簡単に実装できます。

この記事がお役に立てば幸いです!

以上がLayuiを使用して画像の滝の流れの表示効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。