Waterfall flow layout and infinite loading picture album effect

This time I will bring you Waterfall flow layout and the effect of unlimited loading of picture albums. What are the precautions to achieve the effect of waterfall flow layout and unlimited loading of picture albums? The following is the actual practice. Let’s take a look at the case.

Directory

1. The pic1.html page code is as follows:

2. The entity class Photoes.cs code that simulates database data is as follows:

3. The general handler Handler1.ashx code for the server to return data to the client is as follows:

4. Sample download:

5. Learn more about waterfall flow layout

First Let me show you the effect of waterfall flow layout and infinite loading picture album:

## 1. The pic1.html page code is as follows:

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="Waterfall flow layout and infinite loading picture album effect" >picture-1</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/2.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-2</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/3.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-3</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/4.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-4</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/5.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-5</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/6.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-6</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/7.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-7</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/8.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-8</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/9.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-9</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/10.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-10</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/11.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-11</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/12.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-12</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/13.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-13</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/14.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-14</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/15.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-15</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/16.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-16</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/17.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-17</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/18.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-18</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/19.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >picture-19</p>
        <p><img  src="/static/imghwm/default1.png" data-src="img/20.jpg" class="lazy" alt="Waterfall flow layout and infinite loading picture album effect" >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="Waterfall flow layout and infinite loading picture album effect" >" + data[i].Name + "").appendTo("#items")
                console.log(data[i].imgUrl + "--" + data[i].Name);
            }
            init();
        });
    </script>

2. The entity class Photoes.cs code for simulating database data is as follows:

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>3. Server The code of Handler1.ashx, a general handler that returns data to the client, is as follows: <span style="color:#ff0000"></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 Summary: I learned about waterfall flow layout and image loading some time ago, and made a simple example. I hope Can consolidate the knowledge one has learned. <p style="text-align: left;"></p> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! <p></p>Recommended reading: <p></p><p style="text-align: left;">CSS to achieve 3D button effect<a href="http://www.php.cn/css-tutorial-389719.html" target="_blank"></a><br></p>##IE compatible solution for opacity transparency filter<p style="text-align: left;"> <a href="http://www.php.cn/css-tutorial-389718.html" target="_blank"></a></p>HTML5+CSS3 loading progress bar and download progress bar implementation<p style="text-align: left;"><a href="http://www.php.cn/css-tutorial-389697.html" target="_blank"></a></p></photoes>

The above is the detailed content of Waterfall flow layout and infinite loading picture album effect. For more information, please follow other related articles on the PHP Chinese website!