js可拖拽位置瀑布流布局代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js可拖拽位置瀑布流布局代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js可拖拽位置瀑布流布局代码</title>

<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/tuozhuai.js"></script>

<style type="text/css">
html,body,div,p,img,a{margin: 0 auto; padding: 0;}
html,body{ height: 100%;}
body{ padding:0px 20px; box-sizing: border-box;font-family: "微软雅黑"; font-size: 14px;}
.img_100 img{ width: 100%;max-width: 100%;}
.margin_bottom_15{margin-bottom: 15px;}
.text_center{ text-align: center;}
.drag_div{width: 1300px; height: 760px; overflow: hidden;  position: relative; }
.drag_div>div{ background: #fff; border-radius: 5px; padding: 10px; box-sizing: border-box; overflow: hidden;}
.drag_div>div.one{position: absolute;top:0;left:0; width: 20%; height: 240px;}
.drag_div>div.two{position: absolute;top:260px;left:0; width: 20%; height: 240px;}
.drag_div>div.three{position: absolute;top:520px;left:0; width: 20%; height: 240px;}
.drag_div>div.four{position: absolute;top:0px;left:21%; width: 37%; height: 760px; }
.drag_div>div.five{position: absolute;top:0px;left:59%; width: 20%; height: 280px;}
.drag_div>div.six{position: absolute;top:300px;left:59%; width: 20%; height: 220px;}
.drag_div>div.seven{position: absolute;top:540px;left:59%; width: 20%; height: 220px;}
.drag_div>div.eight{position: absolute;top:0px;left:80%; width: 20%; height: 280px;}
.drag_div>div.nine{position: absolute;top:300px;left:80%; width: 20%; height: 220px;}
.drag_div>div.ten{position: absolute;top:540px;left:80%; width: 20%; height: 220px;}

.drag_div>div.one img,.drag_div>div.two img,.drag_div>div.three img{ width: 100%; height: 180px;}
.drag_div>div.four img{width: 100%; height: 700px;}
.drag_div>div.five img,.drag_div>div.eight img{width: 100%; height: 220px;}
.drag_div>div.six img,.drag_div>div.seven img,.drag_div>div.nine img,.drag_div>div.ten img{width: 100%; height: 160px;}
</style>

</head>
<body style="background: #ddd;">
<div class="drag_div" id="drag_div">
	<div class="one"><p class="img_100 margin_bottom_15"><img src="images/wall1.jpg"></p><p class="text_center">我是第一张</p></div>
	<div class="two">
		<p class="img_100 margin_bottom_15"><img src="images/wall2.jpg"></p>
		<p class="text_center">我是第二张</p>
	</div>
	<div class="three">
		<p class="img_100 margin_bottom_15"><img src="images/wall3.jpg"></p>
		<p class="text_center">我是第三张</p>
	</div>
	<div class="four">
		<p class="img_100 margin_bottom_15"><img src="images/wall4.jpg"></p>
		<p class="text_center">我是第四张</p>
	</div>
	<div class="five">
		<p class="img_100 margin_bottom_15"><img src="images/wall5.jpg"></p>
		<p class="text_center">我是第五张</p>
	</div>
	<div class="six">
		<p class="img_100 margin_bottom_15"><img src="images/wall6.jpg"></p>
		<p class="text_center">我是第六张</p>
	</div>
	<div class="seven">
		<p class="img_100 margin_bottom_15"><img src="images/wall7.jpg"></p>
		<p class="text_center">我是第七张</p>
	</div>
	<div class="eight">
		<p class="img_100 margin_bottom_15"><img src="images/wall8.jpg"></p>
		<p class="text_center">我是第八张</p>
	</div>
	<div class="nine">
		<p class="img_100 margin_bottom_15"><img src="images/wall1.jpg"></p>
		<p class="text_center">我是第九张</p>
	</div>
	<div class="ten">
		<p class="img_100 margin_bottom_15"><img src="images/wall2.jpg"></p>
		<p class="text_center">我是第十张</p>
	</div>
</div>
</body>
</html>

JS代码(move.js):

;
	//通过class获取元素function getClass(cls){
	var ret = [];
	var els = document.getElementsByTagName("*");
	for (var i = 0;
	i < els.length;
	i++){
	//判断els[i]中是否存在cls这个className;
	.indexOf("cls")判断cls存在的下标，如果下标>=0则存在;
	if(els[i].className === cls || els[i].className.indexOf("cls")>=0 || els[i].className.indexOf(" cls")>=0 || els[i].className.indexOf(" cls ")>0){
	ret.push(els[i]);
}
}
return ret;
}
function getStyle(obj,attr){
	//解决JS兼容问题获取正确的属性值return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
function startMove(obj,json,fun){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
	var isStop = true;
	for(var attr in json){
	var iCur = 0;
	//判断运动的是不是透明度值if(attr=="opacity"){
	iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}
else{
	iCur = parseInt(getStyle(obj,attr));
}
var ispeed = (json[attr]-iCur)/8;
	//运动速度如果大于0则向下取整，如果小于0想上取整；ispeed = ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
	//判断所有运动是否全部完成if(iCur!=json[attr]){
	isStop = false;
}
//运动开始if(attr=="opacity"){
	obj.style.filter = "alpha:(opacity:"+(json[attr]+ispeed)+")";
	obj.style.opacity = (json[attr]+ispeed)/100;
}
else{
	obj.style[attr] = iCur+ispeed+"px";
}
}
//判断是否全部完成if(isStop){
	clearInterval(obj.timer);
	if(fun){
	fun();
}
}
}
,30);
}

JS代码(tuozhuai.js):

window.onload = function(){
	var oUl= document.getElementById("drag_div");
	var aLi = oUl.getElementsByTagName('div');
	var disX = 0;
	var disY = 0;
	var minZindex = 1;
	var aPos =[];
	for(var i=0;
	i<aLi.length;
	i++){
	var t = aLi[i].offsetTop;
	var l = aLi[i].offsetLeft;
	aLi[i].style.top = t+"px";
	aLi[i].style.left = l+"px";
	aPos[i] ={
	left:l,top:t}
;
	aLi[i].index = i;
}
for(var i=0;
	i<aLi.length;
	i++){
	aLi[i].style.position = "absolute";
	aLi[i].style.margin = 0;
	setDrag(aLi[i]);
}
//拖拽function setDrag(obj){
	obj.onmouseover = function(){
	obj.style.cursor = "move";
}
obj.onmousedown = function(event){
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
	obj.style.zIndex = minZindex++;
	//当鼠标按下时计算鼠标与拖拽对象的距离disX = event.clientX +scrollLeft-obj.offsetLeft;
	disY = event.clientY +scrollTop-obj.offsetTop;
	document.onmousemove=function(event){
	//当鼠标拖动时计算div的位置var l = event.clientX -disX +scrollLeft;
	var t = event.clientY -disY + scrollTop;
	obj.style.left = l + "px";
	obj.style.top = t + "px";
	/*for(var i=0;
	i<aLi.length;
	i++){
	aLi[i].className = "";
	if(obj==aLi[i])continue;
	//如果是自己则跳过自己不加红色虚线if(colTest(obj,aLi[i])){
	aLi[i].className = "active";
}
}
*/
for(var i=0;
	i<aLi.length;
	i++){
	aLi[i].className = aLi[i].className;
}
var oNear = findMin(obj);
	if(oNear){
	//oNear.className = "active";
}
}
document.onmouseup = function(){
	document.onmousemove = null;
	//当鼠标弹起时移出移动事件document.onmouseup = null;
	//移出up事件，清空内存//检测是否普碰上，在交换位置var oNear = findMin(obj);
	if(oNear){
	var width1=oNear.clientWidth;
	var height1=oNear.clientHeight;
	var width2=obj.clientWidth;
	var height2=obj.clientHeight;
	console.log(width1+width2) console.log(oNear.className);
	console.log(obj.className) var className1=obj.className;
	var className2=oNear.className;
	obj.className=className2;
	oNear.className=className1;
	oNear.style.zIndex = minZindex++;
	obj.style.zIndex = minZindex++;
	startMove(oNear,aPos[obj.index]);
	startMove(obj,aPos[oNear.index]);
	//交换indexoNear.index += obj.index;
	obj.index = oNear.index - obj.index;
	oNear.index = oNear.index - obj.index;
	obj.clientWidth=width2;
	obj.clientHeight=height2;
	oNear.clientWidth=width1;
	oNear.clientHeight=height1;
}
else{
	startMove(obj,aPos[obj.index]);
}
}
clearInterval(obj.timer);
	return false;
	//低版本出现禁止符号}
}
//碰撞检测function colTest(obj1,obj2){
	var t1 = obj1.offsetTop;
	var r1 = obj1.offsetWidth+obj1.offsetLeft;
	var b1 = obj1.offsetHeight+obj1.offsetTop;
	var l1 = obj1.offsetLeft;
	var t2 = obj2.offsetTop;
	var r2 = obj2.offsetWidth+obj2.offsetLeft;
	var b2 = obj2.offsetHeight+obj2.offsetTop;
	var l2 = obj2.offsetLeft;
	if(t1>b2||r1<l2||b1<t2||l1>r2){
	return false;
}
else{
	return true;
}
}
//勾股定理求距离function getDis(obj1,obj2){
	var a = obj1.offsetLeft-obj2.offsetLeft;
	var b = obj1.offsetTop-obj2.offsetTop;
	return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
}
//找到距离最近的function findMin(obj){
	var minDis = 999999999;
	var minIndex = -1;
	for(var i=0;
	i<aLi.length;
	i++){
	if(obj==aLi[i])continue;
	if(colTest(obj,aLi[i])){
	var dis = getDis(obj,aLi[i]);
	if(dis<minDis){
	minDis = dis;
	minIndex = i;
}
}
}
if(minIndex==-1){
	return null;
}
else{
	return aLi[minIndex];
}
}
}

附件:下载该文件资源,减少时间成本(增值服务)