自定义基于jquery竖向瀑布流插件
程序员文章站
2024-02-01 21:17:10
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造*写一个,并封装成插件 于是就想分享一下,主要是为了更好的学习与记忆。 如果大家进来了,希望能给我github点个免费star,你轻轻的来,不要悄悄的走嘛。感谢大佬 "github" 下面介绍一下(也可以去 "g ......
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造*写一个,并封装成插件
于是就想分享一下,主要是为了更好的学习与记忆。
如果大家进来了,希望能给我github点个免费star,你轻轻的来,不要悄悄的走嘛。感谢大佬- -
下面介绍一下(也可以去github看
jquery-waterfall
waterfall with jquery prototype function
一款简单jq插件,配载es6语法的竖向瀑布流
插件特点:
- 数据灵活,可以后台请求数据载入页面也可以直接在html中加入元素,一般放第一页
- 同个页面可以放置多个,使用tab切换无刷新
- 页面滚动至底部前自动请求加载数据
- 数据底部动态生成加载提示或已加载结束
- 可配置是否适应resize,通用pc到手机响应式
- 自定义瀑布流元素之间间距,内容根据样式宽度自适应放入数量
- es6语法promise函数,保证图片加载后布局
插件依赖
- jquery 2.1.4
- 插件环境es6语法,浏览器中需要babel转义
使用方法
- 在jquery.js后引入
- 自定义瀑布流容器,设置初始高度,需要相对定位
- 自定义瀑布流元素,定义宽度与默认样式,高度根据图片自适应(默认class="item")
- 容器调用插件方法
// 接受参数 /* ** 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); } }) } })