一个仿win8的小demo

话说今天闲着没事，写着玩的，放出来看看，很简单，但是效果还不错
上代码：
<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
一个仿win8的小demo

2 条评论

写下你的评论
