jQuery手机端瀑布流布局代码

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>jQuery手机端瀑布流布局代码</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/> 
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>

<div class="wrapper">
	<ul class="wall">
		<li class="article">
			<a href="#">
				<img src="images/7.jpg" />
			<p>用户名用户名用户名用户名用户名</p>
				<small>10000000票</small>
				<input type="button" value="投票" />
			</a>
		</li>
		<li class="article">
			<a href="#">
				<img src="images/12.jpg" />
				<p>用户名用户名用户名用户名</p>
				<small>10000000票</small>
				<input type="button" value="投票" />
			</a>
		</li>
		<li class="article">
			<a href="#">
				<img src="images/4.jpg" />
				<p>用户名用户名用户名用户名用户名</p>
				<small>10000000票</small>
				<input type="button" value="投票" />
			</a>
		</li>
		<li class="article">
			<a href="#">
				<img src="images/6.jpg" />
				<p>用户名用户名用户名用户名用户名</p>
				<small>10000000票</small>
				<input type="button" value="投票" />
			</a>
		</li>
	</ul>
</div>
<script src="js/jaliswall.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$('.wall').jaliswall({ item: '.article' });
	});
</script>
</body>
</html>

JS代码(jaliswall.js):

"use strict";
	"object"!=typeof window.CP&&(window.CP={
}
),window.CP.PenTimer={
	programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{
}
,_loopTimers:{
}
,START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){
	this._loopExits[o]=!0}
,shouldStopLoop:function(o){
	if(this.programKilledSoStopMonitoring)return!0;
	if(this.programNoLongerBeingMonitored)return!1;
	if(this._loopExits[o])return!1;
	var t=this._getTime();
	if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;
	var i=t-this.timeOfFirstCallToShouldStopLoop;
	if(i<this.START_MONITORING_AFTER)return!1;
	if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;
	try{
	this._checkOnInfiniteLoop(o,t)}
catch(n){
	return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}
return!1}
,_sendErrorMessageToEditor:function(){
	try{
	if(this._shouldPostMessage()){
	var o={
	action:"infinite-loop",line:this._findAroundLineNumber()}
;
	parent.postMessage(JSON.stringify(o),"*")}
else this._throwAnErrorToStopPen()}
catch(t){
	this._throwAnErrorToStopPen()}
}
,_shouldPostMessage:function(){
	return document.location.href.match(/boomerang/)}
,_throwAnErrorToStopPen:function(){
	throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."}
,_findAroundLineNumber:function(){
	var o=new Error,t=0;
	if(o.stack){
	var i=o.stack.match(/boomerang\S+:(\d+):\d+/);
	i&&(t=i[1])}
return t}
,_checkOnInfiniteLoop:function(o,t){
	if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;
	var i=t-this._loopTimers[o];
	if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop:"+o}
,_getTime:function(){
	return+new Date}
}
,window.CP.shouldStopExecution=function(o){
	return window.CP.PenTimer.shouldStopLoop(o)}
,window.CP.exitedLoop=function(o){
	window.CP.PenTimer.exitedLoop(o)}
;
	(function ($){
	$.fn.jaliswall = function (options){
	this.each(function (){
	var defaults ={
	item:'.wall-item',columnClass:'.wall-column',resize:true}
;
	var prm = $.extend(defaults,options);
	var container = $(this);
	var items = container.find(prm.item);
	var elemsDatas = [];
	var columns = [];
	var nbCols = getNbCols();
	init();
	function init(){
	nbCols = getNbCols();
	recordAndRemove();
	print();
	if (prm.resize){
	$(window).resize(function (){
	if (nbCols != getNbCols()){
	nbCols = getNbCols();
	setColPos();
	print();
}
}
);
}
}
function getNbCols(){
	var instanceForCompute = false;
	if (container.find(prm.columnClass).length == 0){
	instanceForCompute = true;
	container.append('<div class=\'' + parseSelector(prm.columnClass) + '\'></div>');
}
var colWidth = container.find(prm.columnClass).outerWidth(true);
	var wallWidth = container.innerWidth();
	if (instanceForCompute) container.find(prm.columnClass).remove();
	return Math.round(wallWidth / colWidth);
}
function recordAndRemove(){
	items.each(function (index){
	var item = $(this);
	elemsDatas.push({
	content:item.html(),class:item.attr('class'),href:item.attr('href'),id:item.attr('id'),colid:index % nbCols}
);
	item.remove();
}
);
}
function setColPos(){
	for (var i in elemsDatas){
	if (window.CP.shouldStopExecution(1)){
	break;
}
elemsDatas[i].colid = i % nbCols;
}
window.CP.exitedLoop(1);
}
function parseSelector(selector){
	return selector.slice(1,selector.length);
}
function print(){
	var tree = '';
	for (var i = 0;
	i < nbCols;
	i++){
	if (window.CP.shouldStopExecution(2)){
	break;
}
tree += '<div class=\'' + parseSelector(prm.columnClass) + '\'></div>';
}
window.CP.exitedLoop(2);
	container.html(tree);
	for (var i in elemsDatas){
	var html = '';
	var content = elemsDatas[i].content != undefined ? elemsDatas[i].content:'';
	var href = elemsDatas[i].href != href ? elemsDatas[i].href:'';
	var classe = elemsDatas[i].class != undefined ? elemsDatas[i].class:'';
	var id = elemsDatas[i].id != undefined ? elemsDatas[i].id:'';
	if (elemsDatas[i].href != undefined){
	html += '<a ' + getAttr(href,'href') + ' ' + getAttr(classe,'class') + ' ' + getAttr(id,'id') + '>' + content + '</a>';
}
else{
	html += '<div ' + getAttr(classe,'class') + ' ' + getAttr(id,'id') + '>' + content + '</a>';
}
container.children(prm.columnClass).eq(i % nbCols).append(html);
}
}
function getAttr(attr,type){
	return attr != undefined ? type + '=\'' + attr + '\'':'';
}
}
);
	return this;
}
;
}
(jQuery));

CSS代码(style.css):

.top-header{background-color:#f60;width:100%;overflow:hidden;position:relative;display:table;}
.top-header h3{font-size:1.6em;padding:1em;margin:0 30%;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis;display:block;color:#fff;font-weight:normal;display:table-cell;}
.top-header a:first-child{width:14%;display:table-cell;padding:0 4%;vertical-align:middle;}
.top-header a:last-child{width:14%;display:table-cell;padding:0 4%;vertical-align:middle;}
.top-header img{width:100%;display:block;}
body{background-color:#f2f2f2;}
/*瀑布流开始*/
.wall{display:block;position:relative;}
.wall-column{display:block;position:relative;width:50%;float:left;padding:0 2%;box-sizing:border-box;}
.article{display:block;margin:0 0 8% 0;padding:5%;background:white;border-radius:3px;box-shadow:0px 1px 2px 0px rgba(0,0,0,0.05);transition:all 100;overflow:hidden;position:relative;}
.article:hover{transform:scale(1.01);}
.article img{display:block;width:100%;margin:0 0 5% 0;}
.article a{color:#666;}
.article p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:70%;font-size:1.2em;line-height:1.5;}
.article small{font-size:1em;color:#ff0000;line-height:1.5;}
.article input{width:20%;padding:0.6em;border-radius:0.4em;font-size:1.1em;z-index:100;background-color:#f60;border:none;position:absolute;bottom:3%;right:5%;color:#fff;box-shadow:0 0 7px #d7d7d7;}
/*瀑布流结束*/
.wrapper h3{text-align:center;margin:0 20%;white-space:nowrap;text-overflow:ellipsis;font-weight:normal;color:#333;overflow:hidden;font-size:1.5em;padding:0.7em 0;}
.wrapper h4{width:90%;margin:0 5%;text-align:justify;font-weight:normal;color:#999;font-size:1.2em;margin-bottom:3%;line-height:1.5;}

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