js可拖拽位置瀑布流布局代码
1、新建html文档。
3、书写hmtl代艨位雅剖码。<div class="drag_div" id=&qu泠贾高框ot;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>
5、书写并添加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);}
7、查看效果。
