本文内容主要摘自：<http://wlog.cn/waterfall/index-zh.html>
开发时请参照原文，本文是在做的过程中遇到的一些问题进行补充说明：
Waterfall
下载
下载waterfall插件最新版本。
使用
html：
<div id="container"></div>
这段代码是作为加载内容的容器。
引入jquery，handlebars和waterfall(注：waterfall默认返回json格式数据并使用handlebars模板渲染json数据，你也可以在options中配置使用其它javascript模板如mustache解析json数据或者直接返回html):
原文中加载部分使用的是handlebars插件，不过我不想再多引入插件还是直接使用json或者html
<script src="/path/jquery.min.js"></script>
<!-- <script src="/path/handlebars.js"></script>不引入 -->
<script src="/path/waterfall.min.js"></script>
template:这段也不需要了
<script id="waterfall-tpl" type="text/x-handlebars-template">
//template content
</script>我使用的是nodejs的ejs模板，是直接从原有的页面上抠出来一块用来动态加载，使用json的话还要写这么一堆字符串，所以干脆使用html格式的加载，其他语言的大同小异，morenews.html数据：
<%newsList.forEach(function(item,index){%>
<div class="news-list-group-item">
<img src="<%=download_website+item.picture_mini%>" alt="">
<div>
<a href="/portal/news/<%=item.news_id%>" ><strong><%=item.title_zh%></strong></a>
<p><%=item.summary_zh%></p>
<p class="news-item-basic"><span class="news-date"><%=item.release_date || item.create_date%></span><span class="news-look">阅读量:<span><%=item.read_count%></span></span></p>
</div>
</div>
<%})%>
script:
$('#container').waterfall({
itemCls: 'news-list-group-item', //加载部分的class
prefix: '',//可以不写
fitWidth: true,
colWidth: 240,
gutterWidth: 10,
gutterHeight: 10,
align: 'center',//加载部分的对齐样式，可能需要配置
minCol: 1,
maxCol: undefined,
maxPage: undefined,
bufferPixel: -50,
containerStyle: {
position: 'relative'
},
resizable: true,
isFadeIn: false,
isAnimated: false,
animationOptions: {
},
isAutoPrefill: true,
checkImagesLoaded: true,
path: undefined,//加载部分请求地址
dataType: 'json', //我使用的是html
params: {},
loadingMsg: '<div style="text-align:center;padding:10px 0; color:#999;"><img src="data:image/gif;base64,R0lGODlhEAALAPQAAP///zMzM+Li4tra2u7u7jk5OTMzM1hYWJubm4CAgMjIyE9PT29vb6KiooODg8vLy1JSUjc3N3Jycuvr6+Dg4Pb29mBgYOPj4/X19cXFxbOzs9XV1fHx8TMzMzMzMzMzMyH5BAkLAAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7" alt=""><br />Loading...</div>',
state: {
isDuringAjax: false,
isProcessingData: false,
isResizing: false,
curPage: 1
},
// callbacks
callbacks: {
/*
* loadingStart
* @param {Object} loading $('#waterfall-loading')
*/
loadingStart: function($loading) {
$loading.show();
//console.log('loading', 'start');
},
/*
* loadingFinished
* @param {Object} loading $('#waterfall-loading')
* @param {Boolean} isBeyondMaxPage
*/
loadingFinished: function($loading, isBeyondMaxPage) {
if ( !isBeyondMaxPage ) {
$loading.fadeOut();
//console.log('loading finished');
} else {
//console.log('loading isBeyondMaxPage');
$loading.remove();
}
},
/*
* loadingError
* @param {String} xhr , "end" "error"
*/
loadingError: function($message, xhr) {
$message.html('Data load faild, please try again later.');
},
/*
* renderData
* @param {String} data
* @param {String} dataType , "json", "jsonp", "html"
*/
renderData: function (data, dataType) {
var tpl,
template;
if ( dataType === 'json' || dataType === 'jsonp' ) { // json or jsonp format
tpl = $('#waterfall-tpl').html();
template = Handlebars.compile(tpl);
return template(data);
} else { // html format
return data;
}
}
},
debug: false
});
options
| itemCls | String | 'waterfall-item' | 瀑布流数据块class |
| prefix | String | 'waterfall' | 瀑布流元素前辍 |
| fitWidth | Boolean | true | 是否自适应父元素宽度 |
| colWidth | Integer | 240 | 瀑布流每列的宽度 |
| gutterWidth | Integer | 10 | 数据块水平间距 |
| gutterHeight | Integer | 10 | 数据块垂直间距 |
| align | String | 'center' | 数据块相对于容器对齐方式，'align', 'left', 'right' |
| minCol | Integer | 1 | 数据块最小列数 |
| maxCol | Integer | undefined | 数据块最多显示列数,默认undefined，最大列数无限制 |
| maxPage | Integer | undefined | 最多显示多少页数据,默认undefined，无限下拉 |
| bufferPixel | Integer | -50 | 滚动时, 窗口底部到瀑布流最小高度列的距离 > bufferPixel时, 自动加载新数据 |
| containerStyle | Object | {position: 'relative'} | 瀑布流默认样式 |
| resizable | Boolean | true | 缩放时是否触发数据重排 |
| isFadeIn | Boolean | false | 新插入数据是否使用fade动画 |
| isAnimated | Boolean | false | resize时数据是否显示动画 |
| animationOptions | Object | {} | resize动画效果，isAnimated为true时有效 |
| isAutoPrefill | Boolean | true | 当文档小于窗口可见区域，自动加载数据 |
| checkImagesLoaded | Boolean | true | 是否图片加载完成后开始排列数据块。如果直接后台输出图片尺寸，可设置为false，强烈建议从后台输出图片尺寸，设置为false |
| path | Array, Function | undefined | 瀑布流数据分页url，可以是数组如["/popular/page/", "/"] => "/popular/page/1/"，或者是根据分页返回一个url方法如：function(page) { return '/populr/page/' + page; } => "/popular/page/1/" |
| dataType | String | 'json' | 瀑布流返回数据格式，'json', 'jsonp', 'html' |
| params | Object | {} | 瀑布流数据请求参数,{type: "popular", tags: "travel", format: "json"} => "type=popular&tags=travel&format=json" |
| loadingMsg | Html | 见下面代码 | 加载提示进度条，html |
| callbacks | Object | 见下面代码 | callback |
| debug | Boolean | false | 开启debug |
loadingMsg:
'<div style="text-align:center;padding:10px 0; color:#999;"><img src="data:image/gif;base64,R0lGODlhEAALAPQAAP///zMzM+Li4tra2u7u7jk5OTMzM1hYWJubm4CAgMjIyE9PT29vb6KiooODg8vLy1JSUjc3N3Jycuvr6+Dg4Pb29mBgYOPj4/X19cXFxbOzs9XV1fHx8TMzMzMzMzMzMyH5BAkLAAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7" alt=""><br />Loading...</div>'
callbacks:
callbacks: {
/*
* ajax请求开始之前
* @param {Object} loading $('#waterfall-loading')
*/
loadingStart: function($loading) {
$loading.show();
},
/*
* ajax请求加载完成
* @param {Object} loading $('#waterfall-loading')
* @param {Boolean} isBeyondMaxPage
*/
loadingFinished: function($loading, isBeyondMaxPage) {
if ( !isBeyondMaxPage ) {
$loading.fadeOut();
} else {
$loading.remove();
}
},
/*
* ajax请求出错误
* @param {String} xhr , "end" "error"
*/
loadingError: function($message, xhr) {
$message.html('Data load faild, please try again later.');
},
/*
* 处理ajax返回数方法
* @param {String} data
* @param {String} dataType , "json", "jsonp", "html"
*/
renderData: function (data, dataType) {
var tpl,
template;
if ( dataType === 'json' || dataType === 'jsonp' ) { // json或jsonp格式
tpl = $('#waterfall-tpl').html();
template = Handlebars.compile(tpl);
return template(data);
} else { // html格式
return data;
}
}
}
method
$('#container').waterfall( 'methodName', [optionalParameters] );
prepend
$('#container').waterfall('prepend', $content, callback);
append
$('#container').waterfall('append', $content, callback);
removeItems
$('#container').waterfall('removeItems', $items, callback);
reLayout
$('#container').waterfall('reLayout', $content, callback);
pause
$('#container').waterfall('pause', callback);
resume
$('#container').waterfall('pause', callback);
option
$('#container').waterfall('option', options, callback);
以上几个方法根据需求使用，比如没有数据的时候，可以查看下面的“没有数据处理”的源码，还有种情况是页面初始化就没有数据，这样会一直有加载的效果，可以加上这样一段代码：
var c = $("#container").html().replace(/\ +/g,"").replace(/[\r\n]/g,"");
if(c==""){
$("#container").append('<p style="color:#FFF; text-align: center">没有数据，请查看其他内容！<a href="javascript:window.history.back()">返回</a></p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>');
}else {
$('#container').waterfall({
itemCls: 'news-list-group-item',
相关推荐
瀑布流布局是一种常见的...总结起来，使用jQuery的waterfall插件实现瀑布流布局主要包括引入插件、初始化元素、处理滚动加载等步骤。通过灵活配置和扩展，可以创建出适应不同场景的瀑布流布局，提供优秀的用户体验。
jQuery Waterfall Plugin是基于JavaScript库jQuery实现的一种瀑布流插件，它能帮助开发者轻松地创建具有这种布局效果的网页。 在jQuery Waterfall Plugin中，主要涉及以下核心知识点： 1. **jQuery库**：jQuery是...
"waterfall无限动态加载图片支持手机移动端的瀑布流插件"是专为适应手机等移动设备设计的，它主要具备以下特点和功能： 1. **无限滚动**：用户无需翻页，只需滚动屏幕，图片就会自动加载，提供无缝的浏览体验。这种...
jQuery懒加载图片的瀑布流插件是一种常见的网页设计技术，用于优化页面性能并提升用户体验。在网页中，当用户滚动页面时，只有进入视口的图片才会被加载，这就是所谓的“懒加载”。同时，瀑布流布局则是一种流行的...
例如，PHP可以通过Ajax请求获取服务器上的图片或内容，然后使用jQuery-waterfall插件进行动态加载和布局。 在整合过程中，你需要确保HTML结构符合插件的要求，通常会包含一个容器元素（如`<div class="waterfall">`...
**jQuery瀑布流插件**是一种基于JavaScript库jQuery的布局插件，主要用于实现网页上元素的瀑布流式布局。这种布局模式通常应用于图片展示、商品目录等场景，它能够让页面中的元素自适应地按照一定规则排列，形成类似...
本文将详细讲解如何使用jQuery来实现这一功能，尤其关注鼠标滚动时的图片加载效果。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。在实现图片动态加载时，我们主要利用...
waterfall-jQuery实现的瀑布流效果，当前流行的一种布局风格，向下滚动即时加载内容,下拉滚动条或鼠标滚轮滚动到页面底部时， 动态即时加载新内容。主要是当滚动到居底部以上100像素时，就开始加载新内容了。
本篇文章将详细介绍如何使用jQuery实现瀑布流滚动加载分页效果。 首先，我们要理解瀑布流的基本原理。瀑布流布局的关键在于计算每个元素的宽度和位置，使其能够在页面上形成连续的多列。通常我们会选择一个固定的...
在React开发中，实现一个高性能的无限滚动下拉加载功能是一项关键的技术挑战，尤其是在处理大量数据或图片时。"Reactwaterfall"是一个专为此场景设计的组件，它提供了瀑布流布局，并结合了无限滚动（也称为懒加载）...
"jq-waterfall"是一款基于jQuery的瀑布流插件，其核心目标是实现类似Pinterest的图片无限滚动加载效果。该插件响应式设计，能够根据用户设备的屏幕尺寸和方向自动调整布局，确保在各种设备上都能呈现出良好的显示...
3. **JavaScript初始化**：在页面加载完成后，使用jQuery选择器获取所有子元素，然后调用插件方法进行初始化。 ```javascript $(document).ready(function() { $('#waterfall').waterfall({ // 配置选项 }); });...
总的来说，jQuery瀑布流插件是实现网页动态、自适应布局的有效工具，其核心在于巧妙地处理元素的尺寸、定位和加载，以实现美观且流畅的视觉效果。对于前端开发者来说，掌握这样的插件不仅能提升工作效率，也能为用户...
1. **源代码文件**：JavaScript文件（如`jquery.waterfall.js`）实现了瀑布流布局的逻辑。 2. **示例或演示**：可能有一个`demo.html`文件，展示了插件的使用方法和效果。 3. **CSS样式表**：`style.css`可能包含了...
在"瀑布流功能"中，核心的实现通常依赖于JavaScript库，比如jQuery的插件"jquery.waterfall"。这个插件是专门为实现瀑布流布局而设计的，它简化了开发者的工作，让网页动态加载和排列内容变得更加容易。以下是对瀑布...
一款简单的jquery瀑布流特效，完美实现了图片的ajax无限加载效果，相关参数设置说明： column_width:240,//列宽 column_className:'waterfall_column',//列的类名 column_space:10,//列间距 cell_...
3. **jQuery插件**：虽然可以通过纯JavaScript实现瀑布流，但使用jQuery插件可以简化流程。有许多现成的jQuery瀑布流插件，如jQuery Masonry、Isotope等。如果你的压缩包中的"waterfall"文件是其中一个插件，那么你...
瀑布流布局的实现通常借助于第三方插件，如Isotope或Masonry，它们提供了灵活的网格布局和自动调整大小的功能。在HTML结构中，我们需要创建一个容器元素，用于容纳从后台获取的数据。每个瀑布流项应该包含在独立的...
2. **动态加载**：当用户滚动页面接近底部时，插件可以自动加载更多内容，实现无限滚动的效果，提高用户体验。 3. **适配不同屏幕尺寸**：随着响应式设计的需求增加，好的瀑布流插件应能适应各种屏幕尺寸，如手机、...
VueWaterfall插件的源代码位于压缩包中的`vue-waterfall-plugin-master`文件夹，包含了组件的实现、示例以及相关的文档说明。开发者可以通过查看源码了解其工作原理，或者根据自己的需求进行定制和扩展。 总之，...