CSS3學習總結——實現瀑布流佈局與無限載入圖片相冊

来源:http://www.cnblogs.com/SeeYouBug/archive/2016/12/17/6189623.html
-Advertisement-
Play Games

一、pic1.html頁面代碼如下:二、模擬資料庫數據的實體類Photoes.cs代碼如下:三、伺服器返回數據給客戶端的一般處理程式Handler1.ashx代碼如下:總結:前段時間學習了瀑布流佈局與圖片載入等知識,做了一個簡單的示例,希望能鞏固一下自己所學的知識。不斷總結,不斷鞏固,不斷提升。。。 ...


首先給大家看一下瀑布流佈局與無限載入圖片相冊效果圖:

一、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>
    <div 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>
    </div>
    <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='item'><img src='img/" + (data[i].imgUrl + num) + ".jpg' />" + data[i].Name + "</p>").appendTo("#items")
                console.log(data[i].imgUrl + "--" + data[i].Name);
            }
            init();
        });
    </script>
</body>
</html>

二、模擬資料庫數據的實體類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;
        }
    }
}

三、伺服器返回數據給客戶端的一般處理程式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;
            }
        }
    }
}

總結:前段時間學習了瀑布流佈局與圖片載入等知識,做了一個簡單的示例,希望能鞏固一下自己所學的知識。

   不斷總結,不斷鞏固,不斷提升。。。

四、示例下載:

https://github.com/SeeYouBug2/The-Waterfall-Flow-Photo.git

五、瞭解更多瀑布流佈局的的知識:

CSS3與頁面佈局學習筆記(四)——頁面佈局大全(負邊距、雙飛翼、多欄、彈性、流式、瀑布流、響應式佈局)

                                                                  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Javascript中有'=='和' '兩種相等比較,後者是全等,會判斷數據類型,前者是相等,在比較時,會發生隱式轉換。 如果將兩個對象做'=='比較,結果會如何呢? 比如有如下兩個對象: 可以看到,哪怕兩個對象的屬性完全一樣,無論是'=='或者' ',返回都是false。 原因:對象通過指針指向的 ...
  • 1.map 2.remove 移除數組 array 中滿足 predicate 條件的所有元素 ,返回的是被移除元素數組. 3.uniq 唯一 ...
  • 1.find 2.findIndex _.findIndex(array, [predicate=_.identity], [thisArg])該方法類似 _.find,區別是該方法返回的是符合 predicate條件的第一個元素的索引,而不是返回元素本身. 參數 predicate 提供的是一個屬 ...
  • scroll事件實現監控滾動條並分頁顯示示例(zepto.js ) 需求:在APP落地頁上的底部位置顯示此前其他用戶的購買記錄,要求此div盒子只顯示3條半,但一頁有10條,div內的滑動條滑到一頁底部自動載入下一頁併發載入埋點。 實現:首先理解三個概念,分別是contentH,viewH,scro ...
  • 本篇文章是講解了一個demo實例,就是怎樣獲取類的結構,以及應該註意的事項,若有什麼建議或意見歡迎前來打擾。 ...
  • 除了可以為元素添加樣式外,還可用來查詢元素,某樣式值alert($('.cls1').css('width')); //100px(返回帶單位的值)註意:原生CSS樣式中有-的去掉並且將後面的單詞第一個字母大寫 alert($('.box').width( )); alert($('.box').h ...
  • 直接進入主題! 一、脫離文檔流元素的居中 方法一:margin:auto法 CSS代碼: HTML代碼: 效果圖: 當一個元素絕對定位時,它會根據第一個不是static定位的祖先元素定位,因此這裡的img根據外層div定位。 方法二:負margin法 CSS代碼: HTML代碼: 效果圖: 這裡,我 ...
  • 序:前段時間公司一次研討會上,一市場部同事展現了同行業其他公司的3D機房,我司領導覺得這個可以研究研究,為了節約成本,我們在網上大量檢索,最後找到一位前輩的博文【TWaver的技術博客】,在那篇博文的評論區終於找到了那位前輩的源碼,可惜下載後發現是壓縮過的.min.js文件。經過各種研究發現,那是人 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...