使用瀑布布局

官方 http://www.wookmark.com/jquery-plugin

GitHub https://github.com/GBKS/Wookmark-jQuery  （下载后里面有很多例子 ）

比如我的这个例子就是参考example-placeholder文件夹中的

很多例子还有一些很炫目的特效 我这里只用最基本的

这里面的reset.css  style.css可以在从上方GitHub下载的文件中找到

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

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

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

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

    <style>

    </style>

    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="jquery.wookmark.js"></script>

</head>

<body>

    <div id="main">

        <ul id="tiles">

            <li >

                <a href="http://www.wookmark.com/image/276712/deer-graphic-tattoo" target="_blank"><img src="http://images2.wookmark.com/deer-graphic-tattoo-wookmark-276712.jpg" alt="Deer Graphic | Tattoo!" width="200" height="321"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/276713/best-animal-tattoo-designs-follow-mary-buffington-tattoooo-s" target="_blank"><img src="http://images3.wookmark.com/best-animal-tattoo-designsfollow-mary-wookmark-276713.jpg" alt="Best Animal Tattoo Designs////Follow Mary Buffington ... | Tattoooo's" width="200" height="267"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277699/6b72d03ea919545f40ab390931360932-jpg-725-9100" target="_blank"><img src="http://images2.wookmark.com/277699_6b72d03ea919545f40ab390931360932.jpg" alt="6b72d03ea919545f40ab390931360932.jpg (725×9100)" width="200" height="2510"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277386/nike-2012-my-time-is-now-campaign-on" target="_blank"><img src="http://images1.wookmark.com/nike-2012-my-time-is-now-campaign-on-wookmark-277386.jpg" alt="Nike 2012 My Time Is Now Campaign on" width="200" height="3387"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277485/smile-we-heart-it" target="_blank"><img src="http://images1.wookmark.com/277485_large.jpg" alt="Smile :) | We Heart It" width="200" height="200"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277105/pinterest" target="_blank"><img src="http://images2.wookmark.com/pinterest-wookmark-277105.jpg" alt="Pinterest" width="200" height="200"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277178" target="_blank"><img src="http://images3.wookmark.com/277178_urc70zyeumm.jpg" alt="??? ????" width="200" height="200"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277097/freebie-psd-ui-kit-on" target="_blank"><img src="http://images3.wookmark.com/freebie-psd-ui-kit-on-behance-wookmark-277097.png" alt="Freebie PSD - UI Kit on" width="200" height="756"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277135/c2b949a32fcfde24469a379d7f62bec2-jpg-image-jpeg-390x900-pixels-redimensionn-e-97" target="_blank"><img src="http://images2.wookmark.com/277135_c2b949a32fcfde24469a379d7f62bec2.jpg" alt="c2b949a32fcfde24469a379d7f62bec2.jpg (Image JPEG, 390x900 pixels) - Redimensionnée (97%)" width="200" height="462"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277372/image-spark-image-tagged-photography-silhouette-claudia-kim" target="_blank"><img src="http://images2.wookmark.com/277372_597298c58c5eb14e579659e799c50612.jpg" alt="Image Spark - Image tagged &quot;photography&quot;, &quot;silhouette&quot; - claudia_kim" width="200" height="300"></a>

            </li>

            <li>

                <a href="http://www.wookmark.com/image/277457/river" target="_blank"><img src="http://images3.wookmark.com/277457_bvqm7dvayqg.jpg" alt="River" width="200" height="200"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277654/1487ea13a39bc2047af18fdf80b5d283-jpg-600-2375" target="_blank"><img src="http://images2.wookmark.com/1487ea13a39bc2047af18fdf80b5d283jpg-wookmark-277654.jpg" alt="1487ea13a39bc2047af18fdf80b5d283.jpg (600×2375)" width="200" height="792"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/276656" target="_blank"><img src="http://images3.wookmark.com/276656_tumblr_mh0b41otmb1rvylgbo1_500.png" alt="" width="200" height="237"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/276678/4aa9a805e39ab82dd17e5739b2b75ebc-jpg-633-960" target="_blank"><img src="http://images1.wookmark.com/4aa9a805e39ab82dd17e5739b2b75ebcjpg-wookmark-276678.jpg" alt="4aa9a805e39ab82dd17e5739b2b75ebc.jpg (633×960)" width="200" height="303"></a>

            </li>

            <li>

                <a href="http://www.wookmark.com/image/277455/river" target="_blank"><img src="http://images1.wookmark.com/277455_bjkhcypv648.jpg" alt="River" width="200" height="284"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277456/river" target="_blank"><img src="http://images2.wookmark.com/277456_tgaidomdozk.jpg" alt="River" width="200" height="311"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277647/78d42b96992c4b5b070cc4783082dc37-png-600-8054" target="_blank"><img src="http://images1.wookmark.com/78d42b96992c4b5b070cc4783082dc37png-wookmark-277647.png" alt="78d42b96992c4b5b070cc4783082dc37.png (600×8054)" width="200" height="2685"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/276828/f-o-forgotten-nobility" target="_blank"><img src="http://images1.wookmark.com/276828_tumblr_mnsy5dzaro1qaoqu9o1_1280.jpg" alt="F&amp;O Forgotten Nobility" width="200" height="289"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/276953" target="_blank"><img src="http://images3.wookmark.com/276953_tumblr_mk9ir81ry81qh7lhfo1_500.jpg" alt="" width="200" height="300"></a>

            </li>

            <li >

                <a href="http://www.wookmark.com/image/277338/dope-illustrations" target="_blank"><img src="http://images1.wookmark.com/dope-illustrations-wookmark-277338.jpg" alt="Dope Illustrations" width="200" height="259"></a>

            </li>

        </ul>

    </div>

    <script type="text/javascript">

    (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

          fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height

      };

        // 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();

      });

    })(jQuery);

    </script>

</body>

Bootstrap 响应式瀑布流 (使用wookmark)的更多相关文章

  1. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  2. 响应式瀑布流插件Grid-A-Licious

    Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...

  3. js实现响应式瀑布流

    导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest ...

  4. jQuery超酷响应式瀑布流效果

    参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></scr ...

  5. javascript适合移动端的响应式瀑布流插件实例演示

    在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...

  6. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  7. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  8. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  9. bootstrap响应式前端页面

    技术:HTML+CSS+JS+bootstrap   概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...

随机推荐

  1. Replace不区分大小写

    private string ReplaceNoCase(string text, string oldValue, string newValue) { return System.Text.Reg ...

  2. 如何为你的美术妹子做Unity的小工具（一）

    在上的工具栏添加   也就是这个位置

  3. Scala io操作

    1. 读文件 scala特有的是scala.io.Source,例如: import scala.io._ Source.fromFile(“cn.scala”,”utf8”).mkString 逐行 ...

  4. 5.7.1.4 window对象

    ECMAScript虽然没有指出如何直接访问Global对象,但web浏览器都是将这个全局对象作为window对象的一部分加以实现的.因此,在全局作用域中声明的所有变量和函数,就都成为了window对 ...

  5. Spring Jdbc使用like模糊查询

    public List<WfConfigMVO> queryList(WfConfigMVO wfConfig) throws SysException { StringBuffer sq ...

  6. python2.7_1.14_编写一个简单的回显客户端/服务器应用

    1.服务端 server.py # -*- coding: utf-8 -*- import socket import argparse host = 'localhost' data_payloa ...

  7. 树莓派高级GPIO库，wiringpi2 for python使用笔记（五）i2c读取测试

    wiringpi2显然也把i2c驱动带给了Python,手头上正巧有一个DS3231的模块,上边带了一个DS3231 RTC(实时时钟),与一片24C32,两个芯片均为iic总线设备,与树莓派接线如下 ...

  8. Java NIO read/write file through FileChannel

    referee:  Java NIO FileChannel A java nio FileChannel is an channel that is connected to a file. Usi ...

  9. [C#]中英文字幕合并的小程序

    今天班里小组合作录了一个视频,我给它做了字幕的时间轴.为了让这个视频假装很高端的样子,我想再加上英文的字幕.中文的纯字幕文本先搞成一句一行,然后放到Google翻译上,复制英文保存在Eng.txt. ...

  10. Qt qss一些伪装态，以及margin与padding区别

    伪状态    描述 :checked    button部件被选中:disabled    部件被禁用:enabled    部件被启用:focus    部件获得焦点:hover    鼠标位于部件 ...