JavaScript:js实现拖拽

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;

}

图片一图片一
图片一图片二
图片一图片三
图片一图片四
图片五
图片六
图片七
图片八

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;

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值