欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

自定义基于jquery竖向瀑布流插件

程序员文章站 2024-02-01 21:17:10
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造*写一个,并封装成插件 于是就想分享一下,主要是为了更好的学习与记忆。 如果大家进来了,希望能给我github点个免费star,你轻轻的来,不要悄悄的走嘛。感谢大佬 "github" 下面介绍一下(也可以去 "g ......

公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造*写一个,并封装成插件

于是就想分享一下,主要是为了更好的学习与记忆。

如果大家进来了,希望能给我github点个免费star,你轻轻的来,不要悄悄的走嘛。感谢大佬- -

github

下面介绍一下(也可以去github

jquery-waterfall

waterfall with jquery prototype function

一款简单jq插件,配载es6语法的竖向瀑布流

插件特点:

  • 数据灵活,可以后台请求数据载入页面也可以直接在html中加入元素,一般放第一页
  • 同个页面可以放置多个,使用tab切换无刷新
  • 页面滚动至底部前自动请求加载数据
  • 数据底部动态生成加载提示或已加载结束
  • 可配置是否适应resize,通用pc到手机响应式
  • 自定义瀑布流元素之间间距,内容根据样式宽度自适应放入数量
  • es6语法promise函数,保证图片加载后布局

插件依赖

  • jquery 2.1.4
  • 插件环境es6语法,浏览器中需要babel转义

使用方法

  1. 在jquery.js后引入
  2. 自定义瀑布流容器,设置初始高度,需要相对定位
  3. 自定义瀑布流元素,定义宽度与默认样式,高度根据图片自适应(默认class="item")
  4. 容器调用插件方法
// 接受参数
/*
    ** item: '.item',  瀑布流元素类名
    ** spacebetween: 10, 元素间距
    ** resize: true, 是否根据窗口自适应
    ** checknav: '', 这边是当有tab切换,tab元素父容器
    ** ajaxdata: null, 滚动加载数据自定义函数,处理数据方法等,自定义方便使用
    ** tipobj: { 动态加载数据底部提示框
        tipdom: '#no-data',
        text0: '已经到底啦~',
        text1: '↓ 下拉加载更多',
    }, 

*/

// ajaxdata: fn(success) ,这里回调函数接受一个函数参数,数据获取成功需要主动调用一下
// 如果有数据 success(str, 1), 没有数据success('', 0)
// str 是你这里处理过返回瀑布流元素字符串


// 举例

// 瀑布流元素
let template = `
    <li class="item" data-id="{ id }">
        <a href="{ url }" title="{ title }">
            <img src="{ thumb }" title="{ title }">
            <div class="mask">
                <div class="img-operate">
                    <span class="collect"><i class="icon-collect"></i></span>
                    <span class="download-other fr">源文件</span>
                    <span class="download-jpg fr">原图</span>
                </div>
                <div class="img-title common_ovh">{ title }</div>
            </div>
        </a>
    </li>`;
let curpage = 2, filterdata = { 一些数据 };

// 后台获取数据接口方法
function getlistajax(callback) {
        let data = filterdata;
        data.page = curpage;

        $.ajax({
            url: '/api/get_photo_list',
            type: 'post',
            data: data,
        })
        .done(function(res) {
            let str = "";
            if(res.code == 200) {
                $.each(res.data, function(index, el) {
                    str += template
                        .replace("{ thumb }", el.thumb)
                        .replace("{ id }", el.id)
                        .replace("{ url }", el.url)
                        .replace(/{ title }/g, el.title)
                });

                curpage++;
            }
            callback(res, str)
        })
        .fail(function(error) {
            console.log(error);
        })
    };

容器.towaterfall({
        ajaxdata: function(success) {
            getlistajax(function(res, str) {
                if(res.code == 200) {
                    $bigsmall.append($(str));
                    success(str, res.next);
                }else {
                    success('', 0);
                }
            })
        }
    })


效果图

自定义基于jquery竖向瀑布流插件

自定义基于jquery竖向瀑布流插件