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

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

Directory

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

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

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

4. 샘플 다운로드:

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

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

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

nbsp;html>


    <meta>
    <title>瀑布流布局与无限加载图片相册</title>
    <style>
        * {
            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>


    <p>
        </p><p><img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-1</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/2.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-2</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/3.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-3</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/4.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-4</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/5.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-5</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/6.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-6</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/7.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-7</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/8.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-8</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/9.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-9</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/10.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-10</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/11.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-11</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/12.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-12</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/13.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-13</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/14.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-14</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/15.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-15</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/16.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-16</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/17.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-17</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/18.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-18</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/19.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-19</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/20.jpg" class="lazy" alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >picture-20</p>
    
    <a>下一页</a>
    <script></script>
    <!--插件的引用-->
    <script></script>
    <script></script>
    <script></script>
    <script>
        //此方法用来初始化图片（图片全部加载完成时调用）
        var init = function () {
            imagesLoaded(document.querySelector(&#39;#items&#39;), function (instance) {
                //此方法用来设置瀑布流布局
                var msnry = new Masonry("#items", {
                    itemSelector: ".item",
                    columnWidth: 0 //列与列之间的宽度
                });
                //alert(&#39;所有的图片都加载完成了&#39;);
            });
        }
        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; / alt="폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과" >" + data[i].Name + "").appendTo("#items")
                console.log(data[i].imgUrl + "--" + data[i].Name);
            }
            init();
        });
    </script>

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 <p style="text-align: left;"><strong><span style="color:#ff0000"> 3. 서버가 클라이언트에 데이터를 반환하는 일반 핸들러 Handler1.ashx 코드는 다음과 같습니다. </span></strong> </p><pre class="brush:php;toolbar:false">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 <p style="text-align: left;">요약: 얼마 전에 폭포 흐름 레이아웃과 이미지 로딩에 대해 배웠고, 지식을 통합하기 위해 간단한 예제를 만들었습니다. 나는 배웠다. </p><p>이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p><p>추천 자료: </p><p style="text-align: left;"><a href="http://www.php.cn/css-tutorial-389719.html" target="_blank">3D 버튼 효과를 얻기 위한 CSS</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/css-tutorial-389718.html" target="_blank">불투명도 투명 필터 IE 호환 솔루션</a></p><p style="text-align: left;"><a href="http://www.php.cn/css-tutorial-389697.html" target="_blank">HTML5+CSS3 로딩 진행률 표시줄 및 다운로드 진행률 표시줄 구현</a><br></p></photoes>

위 내용은 폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!