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

程序员文章站 2022-05-17 23:19:49

...

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>

相关标签：瀑布流 query wookmark js 实现

上一篇： FlashFXP注册码-FlashFXP密钥

下一篇：剪映混合模式怎么用剪映混合模式使用流程分享

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

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

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

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

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