position:relative;
overflow:hidden;
}
#falls
{
position:relative;
margin:0px auto 0px auto;
}
#falls div{
width:130px;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
border-bottom:2px solid #CCC;
border-top:1px solid #EEE;
position:absolute;
padding:10px;
top:45px;
left:-600px;
display:none;
background-color:#FFF;
}
#falls span
{
display:block;
cursor:move;
padding:5px;
}
#falls span:hover
{
background-color:#DDD;
}
.clone
{
opacity: 0.8;
-filter:alpha(opacity=80); /* IE 透明度20% */
-moz-opacity:0.8; /* Moz FF 透明度20%*/
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”; /IE8/
}
#falls img
{
/width:200px;/
margin:0px;
}
![](close.png)
![](close.png)
![](close.png)
![](close.png)
![](close.png)
![](close.png)
![](close.png)
![](close.png)
JS代码如下:
(function($) {
$.fn.Waterfall = function(setting) {
return this.each(function() {
var vs = $.browser;
var defaults = {
row: 0,
width: 200,
margin: 5,
speed: 200,
tagName: ‘div’,
mark: ‘fall’,
delTime: 3000,
control: “#falls:first-child”
};
var topList = [],
leftList = [],
settings = $.extend(defaults, setting),
$Obj = $(this),
Olist,
Ol,
Olength = 0,
rows,
Fwidth = settings.width + settings.margin,
Swidth,
Mwidth,
msie;
var clone, down = false,
sour, targ, cur = {
curX: 0,
curY: 0
},
sou = {
souX: 0,
souY: 0
},
tag = {
tagX: 0,
tagY: 0
},
i = 0;
var min, minIndex;
var init = function() {
rows = (settings.row == 0) ? Math.floor(($(window).width() - 40) / Fwidth) : settings.row;
Swidth = Fwidth * rows;
Lwidth = Fwidth * (rows + 1);
$Obj.css(“width”, Swidth)
};
var append = function() {
init();
Olist = $Obj.children(settings.tagName + “[name!='” + settings.mark + “']”);
Olist.css({
“position”: “absolute”
});
if ($Obj.children(settings.tagName + “[name='” + settings.mark + “']”).length > 0) {
topList = $Obj.data(“List”).tL;
leftList = $Obj.data(“List”).lL
} else {
topList.length = 0;
leftList.length = 0;
$Obj.removeData(“List”);
for (var i = 0; i < rows; i++) {
leftList.push(Fwidth * i);
topList.push(0)
}
}
};
var direction = function(elem) {
min = Math.min.apply({},
topList);
minIndex = $.inArray(min, topList);
topList[minIndex] += elem.outerHeight() + settings.margin;
$Obj.css(“height”, Math.max.apply({},
topList))
};
var orient = function() {
Olist.find(“img”).bind(“load”,
function() {
Ol = $(this).parents(“#falls>” + settings.tagName);
Ol.attr(“name”, settings.mark)
});
var timeout = setTimeout(function() {
Olist.each(function() {
var Ol = $(this);
if (Ol.attr(“name”) == settings.mark) {
direction(Ol);
Ol.css({
top: min,
left: leftList[minIndex]
}).fadeIn(settings.speed)
} else {
Ol.remove()
}
})
},
settings.delTime);
$Obj.data(“List”, {
tL: topList,
lL: leftList
})
};
var reset = function() {
init();
Olist = $Obj.children(settings.tagName + “[name='” + settings.mark + “']”);
topList.length = 0;
leftList.length = 0;
for (var i = 0; i < rows; i++) {
leftList.push(Fwidth * i);
topList.push(0)
}
Olist.each(function() {
direction($(this));
$(this).stop().animate({
top: min,
left: leftList[minIndex]
},
settings.speed)
});
$Obj.data(“List”, {
tL: topList,
lL: leftList
})
};
$(document).ready(function() {
append();
orient();
$(window).unbind(“resize”).resize(function() {
var _w = $(window).width();
if (_w < Swidth || _w > Lwidth) {
reset()
}
});
if (! ($.browser.msie && $.browser.version == “6.0”)) {
$(document).unbind(“mousemove mouseup”).mousemove(function(event) {
if (down) {
var eve = event || window.event;