Heim > Artikel > Web-Frontend > Wasserfall-Flow-Layout und unendlich ladender Bilderalbum-Effekt

Wasserfall-Flow-Layout und unendlich ladender Bilderalbum-Effekt

php中世界最好的语言Original: 2018-03-22 15:18:462783Durchsuche

Dieses Mal präsentiere ich Ihnen das Wasserfall-Flow-Layout und den Effekt des unbegrenzten Ladens von Fotoalben. Was sind die Vorsichtsmaßnahmen, um den Effekt des Wasserfall-Flow-Layouts und des unbegrenzten Ladens von zu implementieren? Hier ist die tatsächliche Praxis.

Inhaltsverzeichnis

1. Der Seitencode pic1.html lautet wie folgt:

2 Der Code der Entitätsklasse Photoes.cs, der Datenbankdaten simuliert, lautet wie folgt:

3. Der allgemeine Handler-Code Handler1.ashx für den Server zur Rückgabe von Daten an den Client lautet wie folgt:

4. Beispiel-Download:

5. Erfahren Sie mehr über Wasserfall-Fluss-Layout

Zunächst möchte ich Ihnen die Wirkung des Wasserfall-Fluss-Layouts und des unendlich ladenden Bilderalbums zeigen:

1 . Der Seitencode pic1.html lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局与无限加载图片相册</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(../img/bg5.jpg);
        }
        #items {
            width: 1060px;
            margin: 0 auto;
            border: 1px solid lightpink;
        }
        .item {
            border: 1px solid lightpink;
            width: 200px;
            color: purple;
            font-size: 30px;
            font-weight: bolder;
            margin: 5px;
            text-align: center;
            opacity: 0.8;
        }
        img {
            width: 200px;
        }
    </style>
</head>
<body>
    <p id="items">
        <p class="item"><img src="img/1.jpg" />picture-1</p>
        <p class="item"><img src="img/2.jpg" />picture-2</p>
        <p class="item"><img src="img/3.jpg" />picture-3</p>
        <p class="item"><img src="img/4.jpg" />picture-4</p>
        <p class="item"><img src="img/5.jpg" />picture-5</p>
        <p class="item"><img src="img/6.jpg" />picture-6</p>
        <p class="item"><img src="img/7.jpg" />picture-7</p>
        <p class="item"><img src="img/8.jpg" />picture-8</p>
        <p class="item"><img src="img/9.jpg" />picture-9</p>
        <p class="item"><img src="img/10.jpg" />picture-10</p>
        <p class="item"><img src="img/11.jpg" />picture-11</p>
        <p class="item"><img src="img/12.jpg" />picture-12</p>
        <p class="item"><img src="img/13.jpg" />picture-13</p>
        <p class="item"><img src="img/14.jpg" />picture-14</p>
        <p class="item"><img src="img/15.jpg" />picture-15</p>
        <p class="item"><img src="img/16.jpg" />picture-16</p>
        <p class="item"><img src="img/17.jpg" />picture-17</p>
        <p class="item"><img src="img/18.jpg" />picture-18</p>
        <p class="item"><img src="img/19.jpg" />picture-19</p>
        <p class="item"><img src="img/20.jpg" />picture-20</p>
    </p>
    <a href="Handler1.ashx" id="next">下一页</a>
    <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
    <!--插件的引用-->
    <script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
    <script src="js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.infinitescroll.min.js"></script>
    <script>
        //此方法用来初始化图片（图片全部加载完成时调用）
        var init = function () {
            imagesLoaded(document.querySelector('#items'), function (instance) {
                //此方法用来设置瀑布流布局
                var msnry = new Masonry("#items", {
                    itemSelector: ".item",
                    columnWidth: 0 //列与列之间的宽度
                });
                //alert('所有的图片都加载完成了');
            });
        }
        init();
        var num = 0;
        //此方法是无限加载的方法
        $("#items").infinitescroll({
            navSelector: "#next",
            nextSelector: "a#next",
            itemSelector: ".item",
            debug: true,
            dataType: "json",
            maxPage: 10,
            appendCallback: false,
            path: function (index) {
                console.log(index);
                return "Handler1.ashx?page=" + index;
            }
        }, function (data) {
            num -= 20;
            for (var i = 0; i < data.length; i++) {
                $("<p class=&#39;item&#39;><img src=&#39;img/" + (data[i].imgUrl + num) + ".jpg&#39; />" + data[i].Name + "</p>").appendTo("#items")
                console.log(data[i].imgUrl + "--" + data[i].Name);
            }
            init();
        });
    </script>
</body>
</html>

2 Der Code der Entitätsklasse Photoes.cs zum Simulieren von Datenbankdaten lautet:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace 瀑布流布局与无限加载图片相册
{
    public class Photoes
    {
        public int imgUrl { get; set; }
        public string Name { get; set; }
        //模拟数据库有两百条数据
        public static List<Photoes> GetData()
        {
            List<Photoes> list = new List<Photoes>();
            Photoes pic = null;
            for (int i= 21; i <=200; i++)
            {
                pic = new Photoes();
                pic.imgUrl = i;
                pic.Name = "Picture-" + i;
                list.Add(pic);
            }
            return list;
        }
    }
}

3. Der allgemeine Handler-Code Handler1.ashx für den Server zur Rückgabe von Daten an den Client lautet wie folgt:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace 瀑布流布局与无限加载图片相册
{
    /// <summary>
    /// 服务器返回数据给客户端的一般处理程序
    /// </summary>
    public class Handler1 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List<Photoes> result = Photoes.GetData();
            int pageIndex = Convert.ToInt32(context.Request["page"]);
            var filtered = result.Where(p => p.imgUrl >= pageIndex * 20 - 19 && p.imgUrl <= pageIndex * 20).ToList();
            JavaScriptSerializer ser = new JavaScriptSerializer();
            string jsonData = ser.Serialize(filtered);
            context.Response.Write(jsonData);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Zusammenfassung: Ich habe vor einiger Zeit etwas über das Wasserfall-Flusslayout und das Laden von Bildern gelernt und ein einfaches Beispiel gemacht, in der Hoffnung, das gelernte Wissen zu festigen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

CSS zur Erzielung eines 3D-Schaltflächeneffekts

IE-kompatible Lösung für Deckkraft-Transparenzfilter

HTML5+CSS3-Ladefortschrittsbalken und Download-Fortschrittsbalkenimplementierung

Das obige ist der detaillierte Inhalt vonWasserfall-Flow-Layout und unendlich ladender Bilderalbum-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des Float-Attributs in CSSNächster Artikel：Detaillierte Erläuterung des Float-Attributs in CSS

In Verbindung stehende Artikel

Mehr sehen