没有合适的资源?快使用搜索试试~ 我知道了~
瀑布流布局浅析 浅谈个人在瀑布流网页的实现中遇到的问题和解决方法 折腾:瀑布流布局(基于多栏列表流体布局实现) javascript 瀑布流、各大瀑布流简析与建议 因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧。先看看Demo 把代码放出来吧 代码如下: ;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:’waterfall_column’,//列的类名 column_space:10,//列间距 cell_selector:’.cell’,//要
资源推荐
资源详情
资源评论
Jquery瀑布流插件使用介绍瀑布流插件使用介绍
瀑布流布局浅析
浅谈个人在瀑布流网页的实现中遇到的问题和解决方法
折腾:瀑布流布局(基于多栏列表流体布局实现)
javascript 瀑布流、各大瀑布流简析与建议
因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧。
先看看Demo
把代码放出来吧
代码如下:
;(function($){
var
//参数
setting={
column_width:204,//列宽
column_className:’waterfall_column’,//列的类名
column_space:10,//列间距
cell_selector:’.cell’,//要排列的砖块的选择器,限定在瀑布流的容器内
img_selector:’img’,//要加载的图片的选择器
auto_imgHeight:true,//是否需要自动计算图片的高度
fadein:true,//是否渐显载入
fadein_speed:600,//渐显速率,单位毫秒
insert_type:1, //砖块插入方式,1为插入最短那列,2为按序轮流插入
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
},
//
waterfall=$.waterfall={},
$container=null;//容器
waterfall.load_index=0, //加载次数
$.fn.extend({
waterfall:function(opt){
opt=opt||{};
setting=$.extend(setting,opt);
$container=waterfall.$container=$(this);
waterfall.$columns=creatColumn();
render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
waterfall._scrollTimer2=null;
$(window).bind(‘scroll’,function(){
clearTimeout(waterfall._scrollTimer2);
waterfall._scrollTimer2=setTimeout(onScroll,300);
});
waterfall._scrollTimer3=null;
$(window).bind(‘resize’,function(){
clearTimeout(waterfall._scrollTimer3);
waterfall._scrollTimer3=setTimeout(onResize,300);
});
}
});
function creatColumn(){//创建列
waterfall.column_num=calculateColumns();//列数
//循环创建列
var html=”;
for(var i=0;i<waterfall.column_num;i++){
html+='<div class=”‘+setting.column_className+'” style=”width:’+setting.column_width+’px; display:inline-block;
*display:inline;zoom:1; margin-left:’+setting.column_space/2+’px;margin-right:’+setting.column_space/2+’px; vertical-
align:top; overflow:hidden”></div>’;
}
资源评论
weixin_38668225
- 粉丝: 2
- 资源: 940
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- (源码)基于深度学习和LoRA技术的图书问答系统.zip
- (源码)基于Servlet和Vue的机动车车辆车库管理系统.zip
- (源码)基于ESP32C3和WiFi的LED控制系统.zip
- (源码)基于Spring Boot和Quartz的定时任务管理系统.zip
- (源码)基于jnetpcap框架的网络流量监控系统.zip
- (源码)基于Spring Boot和WebSocket的FTP部署管理系统.zip
- (源码)基于Java的超市管理系统.zip
- (源码)基于Spring Boot框架的飞行管理系统.zip
- C++课程设计项目:课程管理系统
- (源码)基于Arduino的Braille训练系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功