原生js实现瀑布流
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>前端开瀑布流效果—lvhui.org</title> <style> body,ul,p,h2,h3{margin:0;padding:0;} li{list-style:none}; a {text-decoration:none;} h3 {font:14px "微软雅黑";} strong { font-weight:normal; font-size:12px; color:#808080;height:24px; line-height:24px; float:left; padding:0 7px; cursor:pointer;} .clear{zoom:1} .clear:after{content:"";display:block;clear:both;} .parent{width:1000px; overflow:hidden; margin:50px auto 0;} .parent li { width:240px; float:left;margin-right:10px;overflow:hidden;} .parent li div[class='tag']{width:229px;border:1px solid #b6b6b6; margin-bottom:10px; border-top:4px solid #6f6f6f; padding:12px 0 0 9px;} .parent li:first-child a{ background:#f0f0f0; text-decoration:none; margin:4px 5px 5px 0;display:inline-block; height:22px; line-height:22px; font-size:12px; color:#a0a0a0; padding:0 10px; border:1px solid #e2e2e2; border-radius:20px;} .parent li:first-child a:nth-of-type(1) { background:#ff9231; color:#fff;} .parent li:last-child{margin-right:0;} .parent li div[class='boBtn'] { width:221px; margin:10px 0 0 -10px; padding-top:17px;} .parent li div[class='boBtn'] div {margin-bottom:10px;} .parent li div[class='boBtn'] p{ float:left; height:24px; line-height:24px; background:#fefefe;margin-bottom:6px; border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px; border:1px solid #ddd; overflow:hidden;} .parent li div[class='boBtn'] span { float:left; padding:0 10px; font-size:12px; height:24px; line-height:24px;} .active { background:#ff9231; color:#fff;} .parent .pic {margin-bottom:10px; border:1px solid #dadada; overflow:hidden; } .parent .pic h3 { padding-top:5px;height:20px; line-height:20px; text-align:center; color:#00c0ff; text-shadow:1px 1px 3px rgba(255,255,255,.5)} .parent .pic p { font-size:12px; color:#aaa;padding:5px 10px; text-indent:2em; line-height:20px; background:#fbfbfb;color:#aaa;} img { width:240px; border:none; vertical-align:top; } </style> <script src="js/ajax2.js" type="text/javascript"></script> <script src="js/move.js" type="text/javascript"></script> </head> <body> <ul class="parent clear"> <li> <div class="tag"> <a href="#">全部</a> <a href="#">连衣裙</a> <a href="#">夏装</a> <a href="#">雪纺</a> <a href="#">东大门</a> <a href="#">半身裙</a> <a href="#">短裙</a> <a href="#">长裙</a> <a href="#">衬衫</a> <a href="#">T恤</a> <a href="#">韩版</a> <a href="#">帮我挑</a> <a href="#">9块9也能穿</a> <a href="#">50元美衣</a> <a href="#">裤子</a> <a href="#">打底裤</a> <a href="#">内衣</a> <a href="#">混搭</a> <a href="#">印花</a> <a href="#">牛仔</a> <a href="#">比基尼</a> <a href="#">蕾丝</a> <a href="#">八卦穿搭</a> <a href="#">印花</a> <a href="#">知识库</a> <div class="boBtn"> <div class="clear"><span>分类</span><p><strong>全部</strong><strong>宝贝</strong><strong class="active">文章</strong><strong>专辑</strong></span></p></div> <div class="clear"><span>排行</span><p><strong>最热</strong><strong class="active">最新</strong></span></p></div> </div> </div> </li> <li> <!--<div class="pic"> <img src="img/4.jpg" /> <h3>dang0529加入夏天就要穿裙...</h3> <p>圆领简单舒适,加上金属的配饰,打破常规,不觉得单调,更显出独特的性格,高贵优...</p> </div>--> </li> <li></li> <li></li> </ul> </body> </html> <script> var oParent=getByClass('parent')[0]; var aLi=oParent.getElementsByTagName('li'); var iPage=1; var iOpen=true; function fnMove() { //鼠标经过图片透明度变化 var aDiv=getByClass('pic'); for(var i=0;i<aDiv.length;i++) { var oImg=aDiv[i].getElementsByTagName('img')[0]; oImg.onmouseover=function() { this.style.filter='alpha(opacity:60)'; this.style.opacity=0.6; } oImg.onmouseout=function() { this.style.filter='alpha(opacity:100)'; this.style.opacity=1; } } } showList(); //初始化加载第一批图片 window.onscroll=function() { var _index= iMin(); //最小高度li的下标 var oLi=aLi[_index]; //最小高度的li var ih=pos(oLi)+oLi.offsetHeight; if(ih<(viewH()+scrollY())) { showList() } }; function showList() { if(!iOpen) return; iOpen=false; iPage++; //document.title=iPage; 测试加载到第几批数据 ajax({ url : 'js/getPics.php', data : 'cpage=' + iPage, dataType: 'json', fnSuc:function(j) { if(j.code==0) { var w=j.data.data; var i=0; function show1() { var oDiv=document.createElement('div'); var oImg=document.createElement('img'); var oH3=document.createElement('h3'); var oP=document.createElement('p'); oDiv.className='pic'; oH3.innerHTML=w[i].favContAlbum || w[i].title || '暂无信息'; oP.innerHTML=w[i].favContTitle || '暂无介绍'; oDiv.appendChild(oImg); oDiv.appendChild(oH3); oDiv.appendChild(oP); oImg.src=''; aLi[iMin()].appendChild(oDiv); fnMove();//调用经过事件 if(w[i].imageUrl) { oImages=new Image(); oImages.onload=function() { oImg.src=this.src; oImg.style.filter='alpha(opacity:0)'; //图片加载完成时,进行透明度变化 oImg.style.opacity=0; startMove(oImg,{ opacity:100 }); if(i<w.length-1) { i++ show1(); }else { iOpen=true; } } oImages.src=w[i].imageUrl; }else { //当图片加载失败走这里 if(i<w.length-1) { i++ show1(); }else { iOpen=true; } } } show1(); }else { // if(code==0)结尾 return; } } }) } //函数封装 function iMin() { var ih=aLi[0].offsetHeight; var _index=0; for(var i=1;i<aLi.length;i++) { if(ih>aLi[i].offsetHeight) { ih=aLi[i].offsetHeight; _index=i; } } return _index; } function getByClass(sClass,parent) { var aEle=(parent || document).getElementsByTagName('*') var arr=[]; var re=new RegExp('\\b' + sClass + '\\b'); for(var i=0;i<aEle.length;i++) { if(re.test(aEle[i].className)) { arr.push(aEle[i]); } } return arr; } function pos(obj) { var iTop=0; while(obj) { iTop +=obj.offsetTop; obj=obj.offsetParent; } return iTop; } function viewH() { return document.documentElement.clientHeight; } function scrollY() { return document.documentElement.scrollTop || document.body.scrollTop; } </script>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>瀑布流demo</title> <style type="text/css"> body,div,a,img{ margin: 0; padding: 0; list-style: none; font: bold 12px "微软黑体"; } .container{ position: absolute; top: 0; } .imgShow{ position: absolute; border: solid 1px #ccc; padding: 10px ; width: 300px; top: 0px; left: 0px; -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out .1s; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s } img{ width: 100%; } </style> </head> <body > <div class="container"> <div class="imgShow"><a href="images/temp_img02.jpg"><img src="images/temp_img02.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img03.jpg"><img src="images/temp_img03.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img04.jpg"><img src="images/temp_img04.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img05.jpg"><img src="images/temp_img05.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img06.jpg"><img src="images/temp_img06.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img07.jpg"><img src="images/temp_img07.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img08.jpg"><img src="images/temp_img08.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img10.jpg"><img src="images/temp_img10.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img11.jpg"><img src="images/temp_img11.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img12.jpg"><img src="images/temp_img12.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img13.jpg"><img src="images/temp_img13.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img14.jpg"><img src="images/temp_img14.jpg"/></a> </div> <div class="imgShow"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a> </div> </div> <script type="text/javascript"> document.getElementsByClassName = function(className, tag, elm) { var testClass = new RegExp("(^|\s)" + className + "(\s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; } var margin = 10; var boxes = document.getElementsByClassName('imgShow'); var con = document.getElementsByClassName('container'); var text = document.getElementsByTagName('h4'); var boxWidth = boxes[0].offsetWidth+margin; function show () { var columnHeight=[]; var bodyWidth = document.body.offsetWidth; var n = parseInt(bodyWidth/boxWidth); var columnNum = n==0?1:n; var bodyLeft = bodyWidth>=boxWidth?bodyWidth-columnNum*boxWidth:0; con[0].style.left = parseInt(bodyLeft/2)-margin/2+'px'; for (var i = 0,l=boxes.length; i <l ; i++) { if (i<columnNum) { columnHeight[i]=boxes[i].offsetHeight+margin; boxes[i].style.top = 0; boxes[i].style.left = i*boxWidth+margin+'px'; } else{ var innsertColumn = min(columnHeight), imgHeight = boxes[i].offsetHeight+margin; boxes[i].style.top = columnHeight[innsertColumn]+'px'; boxes[i].style.left = innsertColumn*boxWidth+margin+'px'; columnHeight[innsertColumn] +=imgHeight; }; }; }; function min (heightAarry) { var minColumn = 0; var minHeight = heightAarry[minColumn]; for (var i = 1,len=heightAarry.length; i < len; i++) { var temp = heightAarry[i]; if (temp < minHeight) { minColumn = i; minHeight = temp; }; }; return minColumn; } window.onload = function(){show();}; window.onresize = function(){show();}; </script> </body> </html>