瀑布流效果Demo总结（3）之基于jquery+jquery.wookmark.js的实现 -

aoyouzi

浏览: 1975575 次
性别:
来自: 北京

最近访客更多访客>>

dy.f

zhaoshijie

lbq136957978

juzhibest

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

瀑布流效果Demo总结（3）之基于jquery+jquery.wookmark.js的实现

博客分类：

技术总结

瀑布流 query wookmark js 实现

1.综述

最近研究了时下流行的瀑布流展示效果。当前共计尝试的方法及其优缺点如下：

（1）基于JQuery框架及blocksit.min.js实现的瀑布流不连续，每列中多多少少都会有一些位置出现空白。

（2）基于JQuery框架，用匿名函数形式，自编程实现瀑布流

（3）基于CSS3，chrome、火狐、搜狗浏览器显示正常，但IE8、IE10均不能显示瀑布流只能显示单列照片，使用Web中介绍的ie-css3.htc或PIE插件仍不能在IE中显示瀑布流效果

（4）基于DIV 用<script>实现的瀑布流，本地瀑布流测试效果正常

2基于jquery+jquery.wookmark.js的实现

<!doctype html>



 <html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>jQuery Wookmark Plug-in Example</title>
<meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
<meta name="author" content="Christoph Ono">

<link rel="stylesheet" href="css/reset.css">


<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div id="container">
    <header>
      <h1>jQuery Wookmark Plug-in Example</h1>
      <p>Resize the browser window or click a grid item to trigger layout updates.</p>
    </header>
    <div id="main" role="main">

</div>
<footer>

</footer>
</div>

<script src="js/jquery-1.7.1.min.js"></script>


<script src="js/jquery.wookmark.js"></script>


<script type="text/javascript">
    $(document).ready(new function() {
      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#main'), // Optional, used for some extra CSS styling
        offset: 2, // Optional, the distance between grid items
        itemWidth: 210 // Optional, the width of a grid item
      };

      // Get a reference to your grid items.
      var handler = $('#tiles li');

      // Call the layout function.
      handler.wookmark(options);

      // Capture clicks on grid items.
      handler.click(function(){
        // Randomize the height of the clicked item.
        var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
        $(this).css('height', newHeight+'px');

        // Update the layout.
        handler.wookmark();
      });
    });
</script>

</body>
</html>

分享到：

微博技术架构总结 | 【钛媒体】社交网络广告怎么做才不让人反感 ...

2013-07-16 14:06
浏览 2106
评论(1)
分类:研发管理
查看更多

1 楼 liuweihug 2014-10-29

jquery瀑布流插件Wookmark完整使用demo -
http://www.suchso.com/projecteactual/jquery-Wookmark-use.html

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

瀑布流效果Demo总结（3）之基于jquery+jquery.wookmark.js的实现

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

瀑布流效果Demo总结（3）之基于jquery+jquery.wookmark.js的实现

评论

发表评论

相关推荐

万字总结Java 9~15新特性

架构制图：工具与方法论

性能优化

【冬察冬见】FFmpeg系列学习笔记

有关创新的一些思考

浅谈面试官的培养

冬察冬见·全视角再议晋升

冬察冬见·晋升-晋升的那些事儿1

物联网MQTT实战

大小公司都适用的架构选型工具箱（涵盖上百个组件）

elasticsearch使用踩坑

【冬察冬见】读书日话高效读书

【冬察冬见·荐书】4·23世界读书日 80本书单推荐承包你一年的书单

快速上手 AB Test

优雅的微服务架构下的鉴权

知识图谱的构建

宜信微服务架构落地及其演进

MySQL性能优化神技

REST协议解密(原创)

大型互联网公司分布式ID方案总结

最近访客更多访客>>