javascript2014-07-08 19:12:54 3434
分享一个现在比较流行布局方法-瀑布流(javascript算法),欢迎留言探讨哈。演示地址就是我博客主页的照片墙模块哈。
window.onscroll=function(){ if(isShowTwo==false){ var allHeight=document.body.offsetHeight||document.documentElement.offsetHeight; var windowHeight = document.body.offsetHeight document.body.scrollHeight ; viewH =$(this).height(), contentH =document.body.scrollHeight,//鍐呭楂樺害 scrollTop =$(this).scrollTop();// if(contentH - viewH - scrollTop <= 100) { isShowTwo=true; } } } var tops=0; var imgCount=0;//鍥剧墖鏁扮洰 var imgArray=new Array();//瀛樻斁楂樺害鏁扮粍 var isChangeH=false; var index=0; var isShowTwo=false; function GetImage(value){ var Main_Wall_Item=$("#" value " > .Main_Wall_Item"); var Main_Wall_ItemImg=$(".Main_Wall_Item >img"); Main_Wall_ItemImg.click(function(){ if(isChange==false){ isChange=true; var localHeight=$(this)[0].offsetHeight; var localParentHeight=$(this).parent()[0].offsetHeight; $(this).parent().css("z-index",112); $(this).animate({height: 500 "px",width: 500 "px"}, 600); $(this).parent().animate({height: 500 "px",width: 500 "px"}, 600); $(this).click(function(){$(this).parent().css("z-index",1);$(this).animate({height: localHeight "px",width: 190 "px"}, 600);$(this).parent().animate({height: localParentHeight "px",width: 220 "px"}, 600,function(){isChange=false});}); } }); var currentArray=new Array(); imgCount=Main_Wall_Item.length; for(var i=0;i<=3;i ){ i==0?Main_Wall_Item[i].style.marginLeft=20 "px":Main_Wall_Item[i].style.marginLeft=(i*220) 20*(i 1) "px"; imgArray[i]=Main_Wall_Item[i].offsetHeight 20//; currentArray[i]=Main_Wall_Item[i].offsetHeight 20//; } for(var i=4;i<imgCount;i ){ currentArray.sort(function(a,b){return a>b?1:-1}); var keyIndex=parseInt(getMinHeightKey(imgArray,currentArray[index])); Main_Wall_Item[i].style.marginLeft=keyIndex*220 20*(keyIndex 1) "px"; Main_Wall_Item[i].style.marginTop=imgArray[keyIndex] "px"; imgArray[keyIndex] =Main_Wall_Item[i].offsetHeight 20; index ; if(index%4==0){ currentArray[0]=imgArray[3]; currentArray[1]=imgArray[2]; currentArray[2]=imgArray[1]; currentArray[3]=imgArray[0]; index=0; } } $(".Main_Wall_Item").animate({opacity: 1}, 1000); document.getElementById("Main_Wall_Live").style.marginTop=imgArray[0] "px"; document.getElementById("Main_Mark_Two").style.marginTop=imgArray[0]-10 "px"; tops=imgArray[0]; } function getMinHeightKey(arr,minH){ for(key in arr){ if(arr[key] == minH){ return key; } } } function CreateMark(){ $("#Main_Mark").css("height",imgArray[0] "px"); }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:javascript瀑布流算法 HTML瀑布留布局 javascript瀑布留布局
文章固定链接:https://www.pengyaou.com/legendsz/front/codejs/MTI=.html
上一篇 CSS3按钮渐变效果
下一篇 HTML5 Canvas