使用瀑布布局

官方 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. SharePoint 2013 Designer 自己定义操作菜单

    众所周知,我们在SharePoint的二次开发中,常常会加入ECB菜单或者Ribbon菜单,通常我们会採取Feature的方式去加入一个Xml,或者採取JavaScript的方式.当然.除此之外,还能 ...

  2. JavaScript之面向对象学习八(继承)

    简介:继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 但是JS的函数并没有签名,所以在ECMASc ...

  3. Ubuntu 14.04 静态IP设置

    1. 编辑/etc/network/interfaces vim /etc/network/interfaces 2.将以下五项添加到/etc/network/interfaces中 Static d ...

  4. UpdatePanel + 弹出框

    ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "", "alert('操作成功!') ...

  5. B - 确定比赛名次

    B - 确定比赛名次 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit S ...

  6. Fedora安装theano

    Fedora下安装theano Fedora下安装theano Theano的安装依赖很多包,有必须的,有可选的.此外,python版本必须大于2.6,请在shell直接键入python,如果小于2. ...

  7. System类基础

    取时间差: public class SystemDemo01 {     public static void main(String[] args) {         long startTim ...

  8. This 关键字和变量作用域

    public class Number {     int count; public void method01(){ //    int count=3;     count=3; //    t ...

  9. 星际SC 地图 Big Game Fort 要塞之战 修正了 BIG GAME 地图的平衡性

    星际SC 地图 Big Game Fort 要塞之战 修正了 BIG GAME 地图的平衡性 也适合BIG 1V1 对战 此版本目前不开放1打1造功能

  10. (Problem 40)Champernowne's constant

    An irrational decimal fraction is created by concatenating the positive integers: 0.1234567891011213 ...