懒加载、瀑布流和LightBox实现图片搜索效果

摘要：无非就是获取用户输入的获取图片信息组装填充页面数据瀑布流布局处理在页面滚动时判断最后一张图片是否可见，如果是则重复以上内容查看源码

做一个小项目，算是对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...