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

rainyang 发布于2019-08-26 11:51 / 1895人阅读

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

开始

做一个小项目，算是对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();
    }
});

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){ // 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...

idc机房托管服务器托管 js实现数据的懒加载图片 js图片懒加载 js瀑布流加载图片 js实现图片渐入效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107681.html

小程序之图片瀑布流（最全实现方式，额外加送懒加载）

摘要：完整代码请戳我们回到小程序，此时接口返回的数据如下可以看到每个图片都有高度了，接下来我们实现瀑布流布局，等下，我们搞下瀑布流布局的懒加载，关于小程序的懒加载，猛戳了解更多。效果图来来来，看啊看，外面的世界多好看， showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果图展示的是瀑布流...

rubyshen 2019-08-22 17:17 评论0 收藏0
小程序之图片瀑布流（最全实现方式，额外加送懒加载）

摘要：完整代码请戳我们回到小程序，此时接口返回的数据如下可以看到每个图片都有高度了，接下来我们实现瀑布流布局，等下，我们搞下瀑布流布局的懒加载，关于小程序的懒加载，猛戳了解更多。效果图来来来，看啊看，外面的世界多好看， showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果图展示的是瀑布流...

yeyan1996 2019-08-05 13:53 评论0 收藏0
原生js实现瀑布流效果

摘要：前言最近在整理基础知识，接触到了几个常用的页面特效，其中觉得用原生实现瀑布流的案例十分有趣，于是与大家分享一下。瀑布流瀑布流，又称瀑布流式布局。通过定位的方式是我们实现瀑布流的最基本的原理，只要我们动态的设置它的值值，就能让它排列。 showImg(https://segmentfault.com/img/remote/1460000012621941?w=1052&h=542); 前...

wangdai 2019-08-21 18:27 评论0 收藏0
Coder Essential之客户端知识索引(iOS/Android/Web)

摘要：本文主要面向笔者在等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。它表示的是一种常见的客户端软件开发框架。部分放在这边是因为它是一套从开始到后面响应中的完整的机制，以中的中的以及中的为典型代表。 [TOC] 本文主要面向笔者在Web、iOS、Android、WP等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。通俗来说，...

AlienZHOU 2019-06-25 14:44 评论0 收藏0
Coder Essential之客户端知识索引(iOS/Android/Web)

摘要：本文主要面向笔者在等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。它表示的是一种常见的客户端软件开发框架。部分放在这边是因为它是一套从开始到后面响应中的完整的机制，以中的中的以及中的为典型代表。 [TOC] 本文主要面向笔者在Web、iOS、Android、WP等移动端开发中的经验总结出在现有以及未来的所有客户端的学习中应该掌握的知识脉络图。通俗来说，...

renweihub 2019-06-24 19:09 评论0 收藏0