집 >웹 프론트엔드 >CSS 튜토리얼 >폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과

폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과

php中世界最好的语言원래의: 2018-03-22 15:18:462936검색

이번에는 폭포 흐름 레이아웃과 사진 앨범 무제한 로딩 효과에 대해 알려드리겠습니다. 폭포 흐름 레이아웃과 사진 앨범 무제한 로딩 효과를 실현하기 위한 주의사항은 무엇인가요? , 살펴 보겠습니다.

Directory

1. pic1.html 페이지 코드는 다음과 같습니다.

2. 데이터베이스 데이터를 시뮬레이션하는 엔터티 클래스 Photoes.cs 코드는 다음과 같습니다.

3. 서버용 일반 핸들러 Handler1.ashx 코드 클라이언트에 데이터를 반환하는 방법은 다음과 같습니다.

4. 샘플 다운로드:

5. 폭포 흐름 레이아웃에 대해 자세히 알아보기

먼저 폭포 흐름 레이아웃과 사진 앨범 무한 로딩의 효과를 보여드리겠습니다.

1. pic1.html 페이지 코드는 다음과 같습니다.

<!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. 데이터베이스 데이터를 시뮬레이션하는 엔터티 클래스 Photoes.cs 코드는 다음과 같습니다.

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. 서버가 클라이언트에 데이터를 반환하는 일반 핸들러 Handler1.ashx 코드는 다음과 같습니다.

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

요약: 얼마 전에 폭포 흐름 레이아웃과 이미지 로딩에 대해 배웠고, 지식을 통합하기 위해 간단한 예제를 만들었습니다. 나는 배웠다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!