摘要：無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數據瀑布流布局處理在頁面滾動時判斷最后一張圖片是否可見，如果是則重復以上內容查看源碼

做一個小項目，算是對js和jQuery的一次練習吧。

圖片資源來自這個網站（上面有很多高清圖片關鍵還是免費下載的）：
https://unsplash.com/

項目具體效果可以點這里：
https://bjw1234.github.io/ima...

項目GitHub地址點這里：
厚著臉皮再說一句，歡迎各位大佬star。
https://github.com/bjw1234/im...

使用jQuery封裝一個簡單的滾動加載插件scrollLoading。

使用方式：

// jQuery對象調用scrollLoading方法即可。
// 通過傳遞實際參數擴展默認值。
$(".loading").scrollLoading({
    attr: "data-url", // 可選： 圖片實際地址屬性
    container: $(window), // 可選： 滾動容器
    callback: $.noop() // 可選： 回調函數    
});

在HTML中：

插件實現思路：

通過給滾動容器綁定scroll事件，在滾動時判斷元素（jQuery對象）是否位于可見區域，如果是則動態的改變img的src屬性值。

代碼實例：
只是簡單示例，不代表具體內容。

var loading = function(){
    // 滾動容器高度
    let containerHeight = container.height();
    // 垂直滾動條位置(卷起的高度)
    let containerScrollTop = container.scrollTop();
    // 判斷是否位于可見區域
    let position = obj.offset().top - containerScrollTop;
    if(obj.is(":visible")&&(position >= 0 && position < containerHeight)) {
    // 這時就可以去改變img的src屬性
    obj.attr(src,url); 
    ...
    }
}

// 容器綁定滾動事件
container.bind("scroll",loading);

由于實現起來比較簡單所以沒有將其封裝成插件。

實現思路：
維護好一個數組，這個數組個數為流體布局的列數，數組元素為每一列的高度值。通過絕對定位的方式將每一個元素布局在合適的位置。
這樣說還是比較抽象的，且看代碼示例：

// 需要實現瀑布流的一些元素
let boxes = $(".xxx");
// 一個盒子的寬度
let w = boxes.eq(0).outerWidth();
// 列數
let cols = Math.floor($(window) / w);
// 存放列高度的數組
let hArr = [];
boxes.each((index,item) => {
    let h = boxes.eq(index).outerHeight();
    if(index < cols){  // 第一行
        hArr[index] = h;
    } else {
        // 拿到最小的那個高度值
        let minH = Math(...hArr);
      // 拿到其對應的下標
      let i = $.inArray(minH,hArr);
      // 動態的設置元素的定位
      $(item).css({
            "position":"absolute",
            "left": w * i + "px",
            "top": minH + "px"
      });      
      // 更新存放列高度的數組
      hArr[i] += boxes.eq(index).outerHHeight();
    }
});

通過事件代理，當用戶點擊某一張圖片時，彈出一個彈框展示高清大圖。在img標簽中需要傳遞的一些參數。

需要的一些參數：

data-role="lightbox"  // 啟動LightBox插件
data-id="xxxxxx" // 該圖片的唯一標識符
data-group="xxx-group" // 圖片分組的名稱
data-source="xxx-url" // 原始大圖地址
data-caption="xxxx" // 圖片的描述文字

使用方式：
除了引入必要的js和css文件之外，在代碼中new這個插件即可：

new LightBox({
    maskOpacity: 0.5, // 遮罩層透明度(可選)
    animateSpeed: "fast" // 動畫執行速度(可選)    
   ... 
});

比較重要的一點就是關于圖片預加載的實現：

function preLoadPicture(src,callback) {
    let image = new Image();
    image.src = src;
    if(!!window.ActiveXObject){ // IE
    image.onreadystatechange = function(){
        if(image.readyState === "complete") {
            callback(image.width,image.height);
          }
        }
    } else { // NOT IE
        image.onload = function(){
            callback(image.width,image.height);
        }
    }   
}

了解了以上內容，實現圖片搜索、展示、無限滾動加載的效果就比較簡單啦。
無非就是：

獲取用戶輸入的keyWord

ajax獲取圖片json信息

組裝、填充頁面HTML數據

瀑布流布局處理

在頁面滾動時判斷最后一張圖片是否可見，如果是則重復以上內容

查看源碼：
https://github.com/bjw1234/im...