jQuery网页瀑布流插件masonry代码

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

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

以下是 jQuery网页瀑布流插件masonry代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery网页瀑布流插件masonry</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div style="background:#FFF; padding:20px 0">
<!--效果开始-->
<div class="qx_list" id="container">
<ul>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic1.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   网站建设1群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic2.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   网站建设2群<br />
   群号：12345678
   </p>
   <p>
   北京SEO2群<br />
   群号：12345678
   </p>
   <p>
   北京网页设计2群<br />
   群号：12345678
   </p>
   <p>
   北京网页制作2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic3.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   网页特效1群<br />
   群号：12345678
   </p>
   <p>
   网页素材2群<br />
   群号：12345678
   </p>
   <p>
   网站开发2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic4.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   网站建设2群<br />
   群号：12345678
   </p>
   <p>
   北京SEO2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic5.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   北京网页制作2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic6.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   北京网页设计2群<br />
   群号：12345678
   </p>
   <p>
   北京网页制作2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic7.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   网站建设2群<br />
   群号：12345678
   </p>
   <p>
   北京SEO2群<br />
   群号：12345678
   </p>
   <p>
   北京网页设计2群<br />
   群号：12345678
   </p>
   <p>
   北京网页制作2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic8.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   网站建设2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic9.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   北京网页设计2群<br />
   群号：12345678
   </p>
   <p>
   北京网页制作2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic10.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   北京SEO2群<br />
   群号：12345678
   </p>
   <p>
   北京网页设计2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic11.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   北京网页设计2群<br />
   群号：12345678
   </p>
   <p>
   北京网页制作2群<br />
   群号：12345678
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox"><img src="images/qx_pic12.jpg" width="210" height="71" /></div>
  <div class="qx_txt">
   <p>
   网站建设2群<br />
   群号：12345678
   </p>
   <p>
   北京SEO2群<br />
   群号：12345678
   </p>
  </div>
 </li>
</ul>
<div class="clear"></div>
</div>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var $container = $('#container');
	$container.imagesLoaded(function(){
		$container.masonry({
			itemSelector: '.box',
			columnWidth: 12 //每两列之间的间隙为5像素
		});
	});
});
</script>
<!--End-->
</div>
</body>
</html>

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

/** * jQuery Masonry v2.1.04 * 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;
	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,c){
	var d=this,f=arguments;
	a.type="smartresize",e&&clearTimeout(e),e=setTimeout(function(){
	b.event.handle.apply(d,f)}
,c==="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",this.offset={
	x:parseInt(this.element.css("padding-"+this.horizontalDirection),10),y:parseInt(this.element.css("padding-top"),10)}
,this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";
	var g=this;
	setTimeout(function(){
	g.element.addClass("masonry")}
,0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){
	g.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+this.options.gutterWidth)),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.add(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 f=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){
	f("cannot call methods on masonry prior to initialization;
	attempted to call method '"+a+"'");
	return}
if(!b.isFunction(d[a])||a.charAt(0)==="_"){
	f("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);

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