wookmark使用示例
最近在做一个电商系统的微商系统，在移动端有个列表的功能，需要类似微信圈瀑布流效果，朋友推荐个iscroll插件，但看了下他的demo，觉得有点复杂作为一个插件来说，而且他的demohtml标签嵌套的厉害，我这里不知道是他的页面功能实现，还是插件必须配置，事件紧急，没有太多事件去研究，于是自己在网上找了个插件（wookwork），使用比较简单，引入基本js，绑定事件也挺简单的。好了，具体的就看看页面实现代码吧;
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wookmark.js"></script>
<script type="text/javascript">
var contextPath = "<%=basePath%>";
var isLoading = false;//页面正在加载标识
var handler = null;
//定义基本属性.
var options = {
autoResize: true,
container: $('#main') //body的id即可
};
//定义滚动函数
function onScroll(event) {
//是否到底部（这里是判断离底部还有100px开始载入数据）.
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 10);
if(closeToBottom) {
if(isLoading){
return;//针对多次火狐多次加载，排序被打乱解决方法 下面的两个if语句也是我用来放置火狐加载多次的，但我加了连个if 还是会一次加载多页，加了这行就没有了。。。是否可以删掉自己看着办试试，应该可以删掉，我觉得。。。
}
var pageNum = $("#pageNum").val()-1+2;
var pageTotal = $("#pageTotal").val();
var prevPageNum = $("#prevPageNum").val();
if(pageNum > pageTotal){
return;
}
if(pageNum <= prevPageNum){
return;
}
$("#pageNum").val(pageNum);
$("#prevPageNum").val(pageNum);
//这里就是AJAX载入的数据
var param = serializeForm('searchForm',true);
isLoading = true;//页面正在加载标识
$.ajax({
url:"<%=basePath%>" + "catentry/catentrySearchWap.action?"+param,
dataType:"html",
async:false,
success:function(html){
//把新数据追加到对象中
$('#catContent').append(html);
isLoading = false;
//清除原来的定位
// if(handler) handler.wookmarkClear();
//创建新的wookmark对象
// handler = $('#catContent div');
// handler.wookmark(options);
//$('#catContent div').trigger('refreshWookmark');
}
});
}
};
$(document).ready(new function() {
//绑定scroll事件.
$(window).bind('scroll', onScroll);//这里不用$(document).bind是因为JQ的$(document)元素在IE6/7/8的无法绑定事件
//第一次布局.
handler = $('#catContent div');
handler.wookmark(options);
});
</script>以上是插件实现功能的全部js，结构清晰。
在页面的话呢：
<!--商品列表-->
<div id="catContent" class="main">
<s:iterator value="#request.catentryInteBeanList" id="cib" status="statu">
<!--商品-->
<div class="floor_goodslist">
<div class="fl_left">
<img src="${cib.url}"/>
</div>
<div class="fl_right">
<p class="txt01">${cib.name}</p>
<p class="txt01">
<s:if test="${fn:length(cib.shortdesc) > 20 }">
<p>${fn:substring(cib.shortdesc,0,20)}...</p>
</s:if>
<s:else>
<p>${cib.shortdesc}</p>
</s:else>
</p>
<p class="txt02">1${cib.qtyunitCodeName}</p>
<p>
<s:set name="dotIndex" value="${fn:indexOf(cib.price, '.')} "></s:set>
<s:set name="price" value="<fmt:formatNumber value='${cib.price}' minFractionDigits='2'/>"></s:set>
<del>市场价:<fmt:formatNumber groupingUsed="false" value="${cib.listPrice}" minFractionDigits="2"/></del>
<em>￥<span>${fn:substring(price,0,dotIndex )}</span>
${fn:substring(price,dotIndex,dotIndex+3 )}</em></p>
<p class="txt03"><img src="images/ico01.png" style="width:7%" align="absmiddle"/>已有
<font>${cib.saleQuantity}</font>人选购本商品</p>
</div>
<div class="clear"></div>
<div class="goodslist_buy" storeId="${cib.storeId}" catentryId="${cib.catentryId}" style="cursor:hand;" onclick="addToShoppingCart(this)">
<img src="images/Shopping_Cart.png"/>
</div>
</div>
</s:iterator>
</div>
这样，一个爽心悦目的瀑布流功能就实现了，可能发生的游览器兼容性问题在js的注释上有些许说明，足够看懂了本人觉得，主要是火狐游览器的问题多。。。
我们判断是否到底部，是通过scroll监听事件去知道的，在ie，360都可以完好测试，火狐会重复加载，重复发送相同的触发action命令，导致分页获取重复的数据。。。。案例说滚动一次，只能加载一次分页，火狐会加载多次，解决方法已在上面给出。