一个仿win8的小demo 作者: Secbone 时间: 2012-12-05 分类: 前端技术 话说今天闲着没事,写着玩的,放出来看看,很简单,但是效果还不错上代码:<html> <style type="text/css"> body{ background-color: #eee; text-align: center; } .main_div{ width: 967px; padding-left: 15px; padding-top: 15px; overflow: hidden; zoom: 1; } .main_div .single_div{ position: relative; float: left; margin-bottom: 15px; margin-right: 15px; width: 220px; height: 300px; } </style> <body> <center> <div class="main_div"> </div> </center> </body> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> <script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script> <script type="text/javascript"> $(function(){ var $container = $('.main_div'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.single_div' }); }); load_more(); $(window).scroll(function(){ // 当滚动到最底部以上100像素时, 加载新内容 if ($(document).height() - $(this).scrollTop() - $(this).height()<100) load_more(); }); }); function diu_Randomize(b,e){ if(!b && b!=0 || !e){return "?";} return Math.floor( ( Math.random() * e ) + b ); } function load_more(){ for(i=0;i<20;i++){ var n_height = get_win8(); var n_width = get_win8(); while(n_height > n_width){ n_height = get_win8(); } var n_color = get_color(); $('.main_div').append('<div class="single_div" style="width:'+n_width+';height:'+n_height+';background-color:'+n_color+'"></div>').masonry("reload"); } } function get_win8(){ var tag = diu_Randomize(1,100); if(tag > 40) return 220; else return 455; } function get_color(){ var tag = diu_Randomize(1,5); switch(tag){ case 1: return '#FF0066'; case 2: return '#339900'; case 3: return '#0099FF'; case 4: return '#FFCC00'; case 5: return '#6633FF'; } } </script> </html>嗯嗯,就是这样~ 标签: win8
伟鹏哥,是你的博客吗?运行代码打开了新的空白页面……你看一下。
@ZH.F:{img:30}{img:30}