开始

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

<img class="loading" data-url="http://xxx/xxx/xxx.jpg" src="https://img-blog.csdnimg.cn/2022010708135191528.gif">

插件实现思路：

通过给滚动容器绑定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();}
});

LightBox插件

通过事件代理，当用户点击某一张图片时，弹出一个弹框展示高清大图。在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){ // IEimage.onreadystatechange = function(){if(image.readyState === 'complete') {callback(image.width,image.height);}}} else { // NOT IEimage.onload = function(){callback(image.width,image.height);}}
}

结束

了解了以上内容，实现图片搜索、展示、无限滚动加载的效果就比较简单啦。
无非就是：

• 获取用户输入的keyWord
• ajax获取图片json信息
• 组装、填充页面HTML数据
• 瀑布流布局处理
• 在页面滚动时判断最后一张图片是否可见，如果是则重复以上内容

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