响应式瀑布流

插件说明:

常用的瀑布流插件不能够很好的自适应外层宽度,而且定义每一个列表的模板都不是很方便,而myfolw.js有很友好的模板书写支持,能够很方便入手,并解决自适应问题。

参数作用:

调用参数 默认值 备注
url -- 请求数据的ajax地址
data {} ajax提交的数据
colspan 4 可以指定列表分多少列,默认列表分是4列
dataArr function(data){return data; } data表示ajax返回的data参数,但一般data并不是我们想要的列表数组,为了方便定位数组,这里可以指定列表数据在data里的位置,例如return data.flowArr,返回的就是ajax数据请求后返回的data中的flowArr数据为瀑布流列表数据。
template function(data) {return "请添加模板";} 列表模板的定义,data代表数组中每一条信息,根据data定义每一条信息的模板。
clearlist false 表示是否在每一次ajax请求后清空瀑布流上一次的数据内容。
提示:myflow.js只是提供了分栏,和数据填充,这样样式定义更加灵活,能更加贴近我们想要的设计样式!

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

实现代码


<div class="myflowBox color4 f30"></div>
<script type="text/javascript">
	var page = 0;
	$(".jiazai").click(function() {
		page++;
		$(".myflowBox").myflow({
			url: "plugins/json.json",
			data: {
				page: page
			},
			colspan: 2,
			//clearlist:true,
			template: function(data) {
				var html = "<dl class='pb1'>";
				html += "	<dt>";
				html += "		<img src='" + data.imgsrc + "' class='w33'/>";
				html += "		</dt>";
				html += "	<dd>" + data.text + "</dd>";
				html += "</dl>";
				return html;
			},
			dataArr: function(data) {
				return data.piclist;
			}
		});
	}).click();
</script>
				

案例补充样式如下:

.myflowBox{line-height:2em;border-bottom:1px solid #ccc}
 .ui-myflow-item{padding-top:.2rem}
 .ui-myflow-item:first-child{border-right:1px solid #ccc}
 .ui-myflow-item:last-child{border-left:1px solid #ccc;margin-left:-1px}