jQuery手机端投票瀑布流代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机端投票瀑布流代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery手机端投票瀑布流代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/menu.css" media="all">
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/jquery.masonry.min.js" ></script>
</head>
<body>                 
<div class="content">  
	<div id="pageCon" class="match_page masonry" style="padding-bottom: 30px">
		<ul class="list_box masonry clearfix" >
			<li class="picCon masonry-brick">
			   <div>
				 <i class="number">35280号</i>
				  <a href="javascript:void(0)" class="img">
					 <img src="img/2.jpg" />
				   </a>
				 <div class="tou">
					 <div class="divP">
					   <span>张三</span>
					   <span>234434票</span> 
					 </div>
					 <a href="javascript:void(0)"  class="vote">投票</a>
				   </div><!--/tou-->
				</div>
			</li>
			<li class="picCon masonry-brick">
			   <div>
				 <i class="number">35280号</i>
				  <a href="javascript:void(0)" class="img">
					 <img src="img/1.jpg" />
				   </a>
				 <div class="tou">
					 <div class="divP">
					   <span>张三</span>
					   <span>234434票</span> 
					 </div>
					 <a href="javascript:void(0)"  class="vote">投票</a>
				   </div><!--/tou-->
				</div>
			</li>
			
			<li class="picCon masonry-brick">
			   <div>
				 <i class="number">35280号</i>
				  <a href="javascript:void(0)" class="img">
					 <img src="img/3.jpg" />
				   </a>
				 <div class="tou">
					 <div class="divP">
					   <span>张三</span>
					   <span>234434票</span> 
					 </div>
					 <a href="javascript:void(0)"  class="vote">投票</a>
				   </div><!--/tou-->
				</div>
			</li>
			
			<li class="picCon masonry-brick">
			   <div>
				 <i class="number">35280号</i>
				  <a href="javascript:void(0)" class="img">
					 <img src="img/4.jpg" />
				   </a>
				 <div class="tou">
					 <div class="divP">
					   <span>张三</span>
					   <span>234434票</span> 
					 </div>
					 <a href="javascript:void(0)"  class="vote">投票</a>
				   </div><!--/tou-->
				</div>
			</li>
			
			<li class="picCon masonry-brick">
			   <div>
				 <i class="number">35280号</i>
				  <a href="javascript:void(0)" class="img">
					 <img src="img/5.jpg" />
				   </a>
				 <div class="tou">
					 <div class="divP">
					   <span>张三</span>
					   <span>234434票</span> 
					 </div>
					 <a href="javascript:void(0)"  class="vote">投票</a>
				   </div><!--/tou-->
				</div>
			</li>
			<li class="picCon masonry-brick">
			   <div>
				 <i class="number">35280号</i>
				  <a href="javascript:void(0)" class="img">
					 <img src="img/6.jpg" />
				   </a>
				 <div class="tou">
					 <div class="divP">
					   <span>张三</span>
					   <span>234434票</span> 
					 </div>
					 <a href="javascript:void(0)"  class="vote">投票</a>
				   </div><!--/tou-->
				</div>
			</li>
		  </ul>
	</div> 
</div>
</body>
</html>

JS代码(jquery.masonry.min.js):

/** * jQuery Masonry v2.1.07 * A dynamic layout plugin for jQuery * The flip-side of CSS Floats * http://masonry.desandro.com * * Licensed under the MIT license. * Copyright 2012 David DeSandro */
(function(a,b,c){
	"use strict";
	var d=b.event,e=b.event.handle?"handle":"dispatch",f;
	d.special.smartresize={
	setup:function(){
	b(this).bind("resize",d.special.smartresize.handler)}
,teardown:function(){
	b(this).unbind("resize",d.special.smartresize.handler)}
,handler:function(a,b){
	var c=this,g=arguments;
	a.type="smartresize",f&&clearTimeout(f),f=setTimeout(function(){
	d[e].apply(c,g)}
,b==="execAsap"?0:100)}
}
,b.fn.smartresize=function(a){
	return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])}
,b.Mason=function(a,c){
	this.element=b(c),this._create(a),this._init()}
,b.Mason.settings={
	isResizable:!0,isAnimated:!1,animationOptions:{
	queue:!1,duration:500}
,gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{
	position:"relative"}
}
,b.Mason.prototype={
	_filterFindBricks:function(a){
	var b=this.options.itemSelector;
	return b?a.filter(b).add(a.find(b)):a}
,_getBricks:function(a){
	var b=this._filterFindBricks(a).css({
	position:"absolute"}
).addClass("masonry-brick");
	return b}
,_create:function(c){
	this.options=b.extend(!0,{
}
,b.Mason.settings,c),this.styleQueue=[];
	var d=this.element[0].style;
	this.originalStyle={
	height:d.height||""}
;
	var e=this.options.containerStyle;
	for(var f in e)this.originalStyle[f]=d[f]||"";
	this.element.css(e),this.horizontalDirection=this.options.isRTL?"right":"left";
	var g=this.element.css("padding-"+this.horizontalDirection),h=this.element.css("padding-top");
	this.offset={
	x:g?parseInt(g,10):0,y:h?parseInt(h,10):0}
,this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";
	var i=this;
	setTimeout(function(){
	i.element.addClass("masonry")}
,0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){
	i.resize()}
),this.reloadItems()}
,_init:function(a){
	this._getColumns(),this._reLayout(a)}
,option:function(a,c){
	b.isPlainObject(a)&&(this.options=b.extend(!0,this.options,a))}
,layout:function(a,b){
	for(var c=0,d=a.length;
	c<d;
	c++)this._placeBrick(a[c]);
	var e={
}
;
	e.height=Math.max.apply(Math,this.colYs);
	if(this.options.isFitWidth){
	var f=0;
	c=this.cols;
	while(--c){
	if(this.colYs[c]!==0)break;
	f++}
e.width=(this.cols-f)*this.columnWidth-this.options.gutterWidth}
this.styleQueue.push({
	$el:this.element,style:e}
);
	var g=this.isLaidOut?this.options.isAnimated?"animate":"css":"css",h=this.options.animationOptions,i;
	for(c=0,d=this.styleQueue.length;
	c<d;
	c++)i=this.styleQueue[c],i.$el[g](i.style,h);
	this.styleQueue=[],b&&b.call(a),this.isLaidOut=!0}
,_getColumns:function(){
	var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();
	this.columnWidth=this.isFluid?this.options.columnWidth(b):this.options.columnWidth||this.$bricks.outerWidth(!0)||b,this.columnWidth+=this.options.gutterWidth,this.cols=Math.floor((b+this.options.gutterWidth)/this.columnWidth),this.cols=Math.max(this.cols,1)}
,_placeBrick:function(a){
	var c=b(a),d,e,f,g,h;
	d=Math.ceil(c.outerWidth(!0)/this.columnWidth),d=Math.min(d,this.cols);
	if(d===1)f=this.colYs;
	else{
	e=this.cols+1-d,f=[];
	for(h=0;
	h<e;
	h++)g=this.colYs.slice(h,h+d),f[h]=Math.max.apply(Math,g)}
var i=Math.min.apply(Math,f),j=0;
	for(var k=0,l=f.length;
	k<l;
	k++)if(f[k]===i){
	j=k;
	break}
var m={
	top:i+this.offset.y}
;
	m[this.horizontalDirection]=this.columnWidth*j+this.offset.x,this.styleQueue.push({
	$el:c,style:m}
);
	var n=i+c.outerHeight(!0),o=this.cols+1-l;
	for(k=0;
	k<o;
	k++)this.colYs[j+k]=n}
,resize:function(){
	var a=this.cols;
	this._getColumns(),(this.isFluid||this.cols!==a)&&this._reLayout()}
,_reLayout:function(a){
	var b=this.cols;
	this.colYs=[];
	while(b--)this.colYs.push(0);
	this.layout(this.$bricks,a)}
,reloadItems:function(){
	this.$bricks=this._getBricks(this.element.children())}
,reload:function(a){
	this.reloadItems(),this._init(a)}
,appended:function(a,b,c){
	if(b){
	this._filterFindBricks(a).css({
	top:this.element.height()}
);
	var d=this;
	setTimeout(function(){
	d._appended(a,c)}
,1)}
else this._appended(a,c)}
,_appended:function(a,b){
	var c=this._getBricks(a);
	this.$bricks=this.$bricks.get_infoadd(c),this.layout(c,b)}
,remove:function(a){
	this.$bricks=this.$bricks.not(a),a.remove()}
,destroy:function(){
	this.$bricks.removeClass("masonry-brick").each(function(){
	this.style.position="",this.style.top="",this.style.left=""}
);
	var c=this.element[0].style;
	for(var d in this.originalStyle)c[d]=this.originalStyle[d];
	this.element.unbind(".masonry").removeClass("masonry").removeData("masonry"),b(a).unbind(".masonry")}
}
,b.fn.imagesLoaded=function(a){
	function h(){
	a.call(c,d)}
function i(a){
	var c=a.target;
	c.src!==f&&b.inArray(c,g)===-1&&(g.push(c),--e<=0&&(setTimeout(h),d.unbind(".imagesLoaded",i)))}
var c=this,d=c.find("img").add(c.filter("img")),e=d.length,f="data:image/gif;
	base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",g=[];
	return e||h(),d.bind("load.imagesLoaded error.imagesLoaded",i).each(function(){
	var a=this.src;
	this.src=f,this.src=a}
),c}
;
	var g=function(b){
	a.console&&a.console.error(b)}
;
	b.fn.masonry=function(a){
	if(typeof a=="string"){
	var c=Array.prototype.slice.call(arguments,1);
	this.each(function(){
	var d=b.data(this,"masonry");
	if(!d){
	g("cannot call methods on masonry prior to initialization;
	attempted to call method '"+a+"'");
	return}
if(!b.isFunction(d[a])||a.charAt(0)==="_"){
	g("no such method '"+a+"' for masonry instance");
	return}
d[a].apply(d,c)}
)}
else this.each(function(){
	var c=b.data(this,"masonry");
	c?(c.option(a||{
}
),c._init()):b.data(this,"masonry",new b.Mason(a,this))}
);
	return this}
}
)(window,jQuery);

CSS代码(menu.css):

*{padding:0;margin:0;}
html,body{font-family:Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;margin:0;padding:0;text-decoration:none;}
body{font:14px/1.5 "Microsoft YaHei","Lucida Sans Unicode","Myriad Pro","Hiragino Sans GB","Heiti SC",Verdana,simsun;-webkit-text-size-adjust:none;background:#fff;color:#333;min-width:320px;}
body,div,dl,dt,dd,.mainmenu,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,table{margin:0;padding:0;}
img{max-width:100%;display:block;border:0;vertical-align:middle;}
i,em{font-style:normal}
a{text-decoration:none;blr:expression(this.onFocus=this.blur());outline:none}
ul,ol,li,dl{list-style-type:none;}
.content{clear:both;padding:10px}
.content .text_a{width:100%;}
.content .text_a a{display:block;width:23.5%;float:left;background:#ff756b;text-align:center;color:#fff;line-height:35px;font-size:16px;}
.content .text_a a:nth-child(2),.content .text_a a:nth-child(3),.content .text_a a:nth-child(4){margin-left:2%;}
.content .text_a a.active{background-color:#f9493c;}
.content .match_page{width:100%;overflow:hidden;}
.content .list_box{position:relative;}
.content .list_box li{width:49.9%;float:left;box-sizing:border-box;margin-bottom:10px;}
.content .list_box li>div{margin:0 5px;position:relative;background-color:#ff756b;}
.content .list_box li>div .number{display:block;width:70px;height:30px;background:#ff756b;position:absolute;color:#fff;text-align:center;line-height:32px;top:0;right:4%;}
.content .list_box li>div .number:after{content:'';width:0;height:0;position:absolute;top:30px;right:0;border-top:10px solid #ff756b;border-left:35px solid transparent;border-right:35px solid transparent;}
.content .list_box li.mr0{margin-right:0;}
.content .list_box li img{width:100%;}
.content .list_box li a.img{display:block;padding:3px 3px 0;}
.content .list_box li a.vote{float:right;width:30%;height:50px;background:#f9493c;line-height:50px;color:#fff;font-size:16px;text-align:center;}
.content .list_box li span{display:block;}
.content .list_box li .piao{position:absolute;z-index:1000;top:0px;left:0px;display:block;background-color:#e4393c;color:#fff;padding:2%;font-size:14px;}
.content .list_box li .tou{clear:both;background-color:#ff756b;color:#fff;height:50px;width:100%}
.content .list_box li .tou .divP{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;width:60%;text-indent:0.5em;height:50px}
.content .list_box li .tou .divP span{line-height:24px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:after{content:" ";clear:both;display:block;height:0;visibility:hidden;}

附件:下载该文件资源,减少时间成本(增值服务)