原创

jquery waterfall瀑布流

因为四个锤子博客的另外一个模块,也就是恋爱日志模块,其中一个功能想做成瀑布流的形式,后来找到了waterfall.js
效果如图所示
file
不过样式都可以自己调的,那倒无关紧要。那么接下来就看看如何使用的
第一步引入静态资源

  <script type="text/javascript"  src="/js/handlebars.js"></script>
        <script type="text/javascript"  src="/js/waterfall.min.js"></script>

下载地址 http://plugins.jquery.com/waterfall/

第二步,创建显示的模板,当然这个模板你可以自定义去创建

<script type="text/x-handlebars-template" id="waterfall-tpl">
    {{#result}}
    <div onclick="lookLoveArticleFun({{idHot}});" class="item" style="padding: 5px;border: solid 1px #c3c3c3;padding-bottom:0px;background: #fff;cursor: pointer">
        <img src="{{image}}" width="{{width}}" height="{{height}}" />
        <div class="yichu1" style="height: 20px;width:'{{width}}';font-size: 14px;font-weight: bold;">{{titleHot}}</div>
        <div style="height: 1px;border-top: 1px solid #c3c3c3"></div>
        <div class="yichu" style="width:'{{width}}';font-size: 10px;word-wrap:break-word;color: #898686;word-wrap:break-word;text-align: left">
            <span class="yispan" style="word-wrap:break-word;width:192px ">{{contentHot}}</span>
        </div>
        <div style="height: 1px;border-top: 1px solid #c3c3c3"></div>
        <div style="height:20px;line-height20px;width:'{{width}}';font-size: 10px;color: #898686">
            <div class="" style="line-height20px;width:'{{width}}';font-size: 10px;float: left"><span style="color: #22B14C">{{lookCountHot}}</span><span> 浏览</span></div>
            <div class="" style="line-height:20px;width:'{{width}}';font-size: 10px;float: right"><span>{{createTimeHot}}</span><#--<span style="margin-left: 3px"> by 四个锤子</span>--></div>
        </div>

    </div>
    {{/result}}

</script>

第三步,在js中初始化代码,因为官方文档的话没找到关于如何去后台请求数据的地方,所以在这特别提醒一下, path: function(page) {
return '/article/listHotArticle';
},
'/article/listHotArticle这个路径就是去后台请求的路径,要注意的是,后台接收到一定是get方法,大锤之前就是在post方法上差点调死。还有需要注意的就是,因为我这块没有做分页,page没有用的,如果你需要分页的话,可以将page以传参的形式传过去。

 $(function () {
        firstWaterFall();
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = 'https://ssl.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    });
 var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-1245097-16']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);
function firstWaterFall() {

        $('#container').waterfall({
            itemCls: 'item',
            colWidth: 222,
            gutterWidth: 15,
            gutterHeight: 15,
            checkImagesLoaded: false,
            dataType: 'json',
            path: function(page) {
                return '/article/listHotArticle';
            },

        });

    }

第四步,后台返回的json数据格式,因为我自己返回的时候尝试了,如果是返回的json里还套有实体类对象的话,我取不到对象里的字段的字,所以最后将对象里的字段都拿出来了,只有一层了,就是一个json的key,对应一个value
数据格式如下,当然我又多添加了一些字段,但是格式都是一样的,这样就大功告成了

{
    "total": 10,
    "result": [
        {
            "image": "http://wlog.cn/demo/waterfall/images/001.jpg",
            "width": 192,
            "height": 200
        },
        {
            "image": "http://wlog.cn/demo/waterfall/images/002.jpg",
            "width": 192,
            "height": 243
        },
        {
            "image": "http://wlog.cn/demo/waterfall/images/003.jpg",
            "width": 192,
            "height": 240
        }
    ]
}
正文到此结束
本文目录