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;" οnclick="addToShoppingCart(this)">
                    <img src="images/Shopping_Cart.png"/>
                </div>
            </div>
    </s:iterator>
</div>
这样，一个爽心悦目的瀑布流功能就实现了，可能发生的游览器兼容性问题在js的注释上有些许说明，足够看懂了本人觉得，主要是火狐游览器的问题多。。。

我们判断是否到底部，是通过scroll监听事件去知道的，在ie，360都可以完好测试，火狐会重复加载，重复发送相同的触发action命令，导致分页获取重复的数据。。。。案例说滚动一次，只能加载一次分页，火狐会加载多次，解决方法已在上面给出。