门户里添加了一个图片频道，看现在的瀑布流这么火，于是想实现一下看看效果。
网上搜索到一个叫waterflow的瀑布流例子，研究了一下，发现要改造起来也不难，下面一步步来实现。
1.新建一个门户列表页瀑布流模板list_waterflow.htm,里面的内容可以先复制list.htm的贴进来。
因为是用ajax方式加载文章列表的，所以原来用loop循环的方式显示列表就可以抛弃了，列表html结构如下：
<div class="waterflow-container"><div><div id="infscr-loading" >添加样式：
/*瀑布流样式*/.waterflow-container{position:relative;font-size:12px;border:1px solid #ccc;padding:0;margin:0;text-align:center;background-color:white;} .hide {display:none;}#infscr-loading{position: fixed;bottom: 40px;left: 50%;top:50%;width: 150px;text-align: center;margin-left: -75px;z-index: 99;}#infscr-loading div{display: block;padding: 5px 10px 5px 10px;background-color: #FAFAEF;border: 1px solid #AAA;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 0 0 18px #999;-webkit-box-shadow: 0 0 18px #999;box-shadow: 0 0 18px #999;}#noshow {position: fixed;bottom: 40px;left: 50%;top:50%;width: 150px;text-align: center;margin-left: -75px;z-index: 99;}#noshow div{display: block;padding: 5px 10px 5px 10px;background-color: #FAFAEF;border: 1px solid #AAA;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 0 0 18px #999;-webkit-box-shadow: 0 0 18px #999;box-shadow: 0 0 18px #999;}添加控制js:
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.windswaterflow.js"></script><script type="text/javascript">var j = jQuery.noConflict();j(document).ready(function(){j(".waterflow-container").windswaterflow({ itemSelector: '.box', loadSelector: '#infscr-loading', noSelector: '#noshow', boxTemplate: '<div class="box hide"><a href="#"><div class="img"><img src="%img%" >2.在source\module\portal\portal_list.php文件里，82行增加ajax提供数据的代码if(isset($_GET['waterflow'])){$wheresql = category_get_wheresql($cat);$list = category_get_list($cat,$wheresql,$page);echo json_encode($list['list']);die();}这样门户的瀑布流就基本实现了。
jquery.windswaterflow.js内容如下：
(function($) { $.fn.windswaterflow = function(options) { //初始化状态 var _init = 0, _isminCols = false, _isnoShow = false; var defaults = { itemSelector: '', loadSelector: '', noSelector: '', boxTemplate: '', columnWidth: 240, marginWidth: 14, marginHeight: 16, minCols: 3, maxPage: 0, align: 'center', ajaxServer: '', boxParam: '', pageParam: 'page', pageNumber: 1, init: false, initBoxNumber: 20, scroll: false, scrollBoxNumber: 10, callback: null }; //参数合并 var param = $.extend({}, defaults, options || {}); //如果没有元素和TPL则返回 if (param.itemSelector == '' || param.tplSelector == '') { return; } if (param.loadSelector != '') { //$(param.loadSelector).hide(); } if (param.noSelector != '') { $(param.noSelector).hide(); } if ($(this).css('text-align') != undefined) { param.align = $(this).css('text-align'); } function _min(_arr) { return Math.min.apply(Math, _arr); }; function _max(_arr) { return Math.max.apply(Math, _arr); }; function findShortIndex(_arr) { var index = 0, i; for (i in _arr) { if (_arr[i] < _arr[index]) { index = i; } } return index; }; function findLongIndex(_arr) { var index = 0, i; for (i in _arr) { if (_arr[i] > _arr[index]) { index = i; } } return index; }; if (param.init) { //如果有初始化，则清空原来的 $(this).html(''); } //BOX个数 var _boxCount = $(param.itemSelector).length; //每个BOX的宽度 var _boxWidth = param.columnWidth + param.marginWidth; //包含层的宽度 var _containerWidth = $(this).width(); //计算出列数 var _showCols = Math.floor(_containerWidth / _boxWidth); //得到居中后的左边padding var _containerPadding = 0; if (param.align == 'left') { _containerPadding = 0; } else if (param.align == 'right') { _containerPadding = _containerWidth % _boxWidth; } else { _containerPadding = (_containerWidth % _boxWidth) / 2; } //如果小于最小列，则左边距为0 if (_showCols < param.minCols) { _containerPadding = 0; _showCols = param.minCols; _isminCols = true; } //计算出行数 var _tpRows = $(param.itemSelector).length / _showCols; var _showRows = Math.floor(_tpRows) == _tpRows ? _tpRows : _tpRows + 1; //记录每行当前的高度 var _colsTopArr = []; //初始化为0 for (var len = 0; len < _showCols; len++) { _colsTopArr.push(0); }; var selector = $(this).selector; function setPosition(wrap, boxs, op) { //临时 最短列序号，左位置值，上位置值 var _tpShortColIdx, _tpLeftPos, _tpTopPos, _tpLen = $(boxs).length; if (op == "resize" || op == "init") { $(wrap).width() _isminCols = false; _containerWidth = $(wrap).width(); _showCols = Math.floor(_containerWidth / _boxWidth); //得到居中后的左边padding if (param.align == 'left') { _containerPadding = 0; } else if (param.align == 'right') { _containerPadding = _containerWidth % _boxWidth; } else { _containerPadding = (_containerWidth % _boxWidth) / 2; } //如果小于最小列，则左边距为0 if (_showCols < param.minCols) { _containerPadding = 0; _showCols = param.minCols; _isminCols = true; } //计算出行数 _tpRows = $(boxs).length / _showCols; _showRows = Math.floor(_tpRows) == _tpRows ? _tpRows : _tpRows + 1; //初始化为0 _colsTopArr.length = 0; for (var len = 0; len < _showCols; len++) { _colsTopArr.push(0); }; } //在第一次加载时无高度的情况下 //chrome不能自已加载 $.browser.safari && if (op == null) { $(boxs).imagesLoaded(function() { $(boxs).each(function(index) { var _tpShortColIdx = index; if (_tpShortColIdx < _showCols && op != "add") { _tpLeftPos = _boxWidth * _tpShortColIdx + _containerPadding + "px"; $(this).css({ "top": "0", "left": _tpLeftPos, "width": param.columnWidth + "px", "margin": "0" }); } else { _tpShortColIdx = findShortIndex(_colsTopArr); _tpLeftPos = _boxWidth * _tpShortColIdx + _containerPadding + "px"; _tpTopPos = _colsTopArr[_tpShortColIdx] + "px"; $(this).css({ "top": _tpTopPos, "left": _tpLeftPos, "width": param.columnWidth + "px", "margin": "0" }); } if (op == "add") { $(this).appendTo(wrap); } _colsTopArr[_tpShortColIdx] = _colsTopArr[_tpShortColIdx] + $(this).height() + param.marginHeight; //全部加入后增加外框 if (index == _tpLen - 1) { $(wrap).height(_max(_colsTopArr) + "px"); if (_isminCols) { //设置以后回不去 //$(wrap).width((_boxWidth * _showCols + _containerPadding + param.marginWidth) + "px"); } if (op == "add") { if ($.browser.msie) { $(".hide").animate({ opacity: 'show' }, 2000); } else { $(".hide").animate({ opacity: 'show' }, 1000); } if (param.loadSelector != '') { $(param.loadSelector).hide(); } } _SolStatus = 0; } }); }); } else { //将所有元素放到各自己的位置 $(boxs).each(function(index) { var _tpShortColIdx = index; if (_tpShortColIdx < _showCols && op != "add") { _tpLeftPos = _boxWidth * _tpShortColIdx + _containerPadding + "px"; $(this).css({ "top": "0", "left": _tpLeftPos, "width": param.columnWidth + "px", "margin": "0" }); } else { _tpShortColIdx = findShortIndex(_colsTopArr); _tpLeftPos = _boxWidth * _tpShortColIdx + _containerPadding + "px"; _tpTopPos = _colsTopArr[_tpShortColIdx] + "px"; $(this).css({ "top": _tpTopPos, "left": _tpLeftPos, "width": param.columnWidth + "px", "margin": "0" }); } if (op == "add" || op == "init") { $(this).appendTo(wrap); } _colsTopArr[_tpShortColIdx] = _colsTopArr[_tpShortColIdx] + $(this).height() + param.marginHeight; //parseInt($(this).css("marginTop")) * 2 + parseInt($(this).css("paddingTop")) + parseInt($(this).css("paddingBottom")); //全部加入后增加外框 if (index == _tpLen - 1) { $(wrap).height(_max(_colsTopArr) + "px"); if (_isminCols) { //设置以后回不去 //$(wrap).width((_boxWidth * _showCols + _containerPadding + param.marginWidth) + "px"); } if (op == "add") { if ($.browser.msie) { $(".hide").animate({ opacity: 'show' }, 2000); } else { $(".hide").animate({ opacity: 'show' }, 1000); } } else { $(".hide").animate({ opacity: 'show' }, 0); } if (param.loadSelector != '') { $(param.loadSelector).hide(); } _SolStatus = 0; if (op == "add" || op == "init") { //每增加一次，页面加1 param.pageNumber++; } } }); } if (param.callback) { param.callback(); } }; if (_boxCount > 0) { setPosition(selector, param.itemSelector); } //初始化完成 _init = 1; //添加元素进去(JSON) function appendBox(data, op) { var newBox = [], len = Number(data.length), idx = 0; _boxCount += len; $.each(data, function(i) { //通过imgReady获取图片高度 imgReady(data[i].img, function() { //data[i].height = parseInt(this.height); //?不知道高度值是否可靠 //这里模版化BOX edit by winds 2012.4.26 var temp = ""; var matchs = param.boxTemplate.match(/\%[a-zA-Z0-9]+\%/gi); for (var j = 0, mlen = matchs.length; j < mlen; j++) { if (temp == "") temp = param.boxTemplate; var re_match = matchs[j].replace(/[\%\%]/gi, ""); temp = temp.replace(matchs[j], data[i][re_match]).replace(/[\r\t\n]/g, ""); } newBox.push(temp); //newBox.push('<div class="box hide"><a class="img" href="#"><img src="' + data[i].img + '" >也只有懂的接受自己的失败，才能更好的去发挥自身优势，也才能够更好的去实现自我
