jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡
调用方法
$('需要布局的块').sault()
如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用
3个参数
1.left:左右间隔
2.top:上下间隔
3.split:希望分成几列
全部是数字
实现原理是绝对定位,不用浮动的原因是,浮动会造成空白
为了固定位置,需要在父元素上使用相对定位
Array.prototype.max = function(){
return Math.max.apply({},this);
} ; Array.prototype.min = function(){
return Math.min.apply({},this);
}; (function ( $ ) {
$.fn.sault=function(options){ var settings = $.extend({
left:10,
top:10,
split:3
}, options);
this.css('position','absolute'); $harr=new Array();
for(var $s=0;$s<settings.split;$s++){
$float0=this.eq($s);
$harr[$s]=$float0.height();
$width=$float0.width(); if($s==0){ }else{
$float0.css('left',$s*($width+settings.left)+'px');
}
}; $count=0; this.each(function(){ if($count<settings.split){
$count++;
}else{
$min= $harr.min();
for(var $i in $harr){
if($harr[$i]==$min){
$index=$i;
}; }; $(this).css('top',$min+settings.top+'px');
$harr[$index]=$min+$(this).height()+settings.top;
$(this).css('left',$index*($width+settings.left)+'px');
$count++;
}
});
this.parent().height($harr.max()+'px'); } }( jQuery ));
修改,好像在ie8下有兼容性问题,所以有了这个修改
Array.prototype.max = function(){
return Math.max.apply({},this);
} ; Array.prototype.min = function(){
return Math.min.apply({},this);
}; (function ( $ ) {
$.fn.sault=function(options){ var settings = $.extend({
left:10,
top:10,
split:3
}, options);
this.css('position','absolute'); $harr=new Array();
for(var $s=0;$s<settings.split;$s++){
$float0=this.eq($s);
$harr[$s]=$float0.height();
$width=$float0.width(); if($s==0){ }else{
$float0.css('left',$s*($width+settings.left)+'px');
}
}; $count=0; this.each(function(){ if($count<settings.split){
$count++;
}else{
$min= $harr.min();
for(var $i in $harr){
if($harr[$i]==$min){
$index=$i;
}; }; $(this).css('top',$min+settings.top+'px');
$harr[$index]=$min+$(this).height()+settings.top;
$(this).css('left',$index*($width+settings.left)+'px');
$count++;
}
});
this.parent().height($harr.max()+'px');
this.parent().height($harr.max()+20+'px\0'); }; }( jQuery ));
jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡的更多相关文章
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- 集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- YCRefreshView-自定义支持上拉加载更多,下拉刷新。。。
自定义支持上拉加载更多,下拉刷新,支持自由切换状态[加载中,加载成功,加载失败,没网络等状态]的控件,拓展功能[支持长按拖拽,侧滑删除]可以选择性添加 .具体使用方法,可以直接参考demo. 轻量级侧 ...
- 移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
- Jquery手机下拉刷新,下拉加载数据
一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...
随机推荐
- 小M的作物 最大权闭合子图
题目大意 bzoj 3438 两个田\(A,B\) \(n\le 1000\)种作物的种子 第\(i\)个种子,种\(A\)价值\(a[i]\),种\(B\)价值\(b[i]\) 再给出\(m\)个子 ...
- 架设自己的SMTP服务器
原文发布时间为:2010-12-13 -- 来源于本人的百度文章 [由搬家工具导入] 发现用自己的电脑架设SMTP服务器,发送速度可真快.... 现在网络流行收费,Email当然首当其冲 ...
- hdu 5952 Counting Cliques 求图中指定大小的团的个数 暴搜
题目链接 题意 给定一个\(n个点,m条边\)的无向图,找出其中大小为\(s\)的完全图个数\((n\leq 100,m\leq 1000,s\leq 10)\). 思路 暴搜. 搜索的时候判断要加进 ...
- C语言字符串操作总结大全(超详细)【转】
转自:http://www.jb51.net/article/37410.htm )字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strc ...
- apscheduler定时器
每天定时任务: import time from apscheduler.schedulers.background import BackgroundScheduler def foo(): pri ...
- 解决IE6的PNG透明
http://www.jb51.net/article/35669.htm http://blog.csdn.net/mosliang/article/details/6760028
- Android判断是否为刘海屏
主要总结主流品牌小米.华为.oppo.vivo的刘海屏判断.在某些特殊页面需要适配刘海屏时,可以用以下方法判断.或者判断屏幕比例是否大于2. /** * 小米刘海屏判断. */ public stat ...
- Educational Codeforces Round 34 C. Boxes Packing【模拟/STL-map/俄罗斯套娃】
C. Boxes Packing time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- Ceres Solver: 高效的非线性优化库(一)
Ceres Solver: 高效的非线性优化库(一) 注:本文基于Ceres官方文档,大部分由英文翻译而来.可作为非官方参考文档. 简介 Ceres,原意是谷神星,是发现不久的一颗轨道在木星和火星之间 ...
- CSS定位与布局:普通流
CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位 ...