实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
5
        <link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/reset.css">
6
        <link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/main.css">
7
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
8
        </script>
9
        <script src="//ku.shouce.ren/libs/wookmark/js/jquery.imagesloaded.js">
10
        </script>
11
        <script src="//ku.shouce.ren/libs/wookmark/js/jquery.wookmark.min.js">
12
        </script>
13
    </head>
14
    <body>
15
    <div class="main">
16
    <div class="inwrap">
17
      <h1>jQuery Wookmark 瀑布流布局</h1>
18
      <h2>Load it all 动态读取图片尺寸</h2>
19
    
20
      <div class="detail">
21
        <p>所有图片都没有设置宽度和高度。通过 <a target="_blank" href="https://github.com/desandro/imagesloaded">imagesLoaded</a> 插件加载所有图片并获取图片尺寸后进行布局。</p>
22
        <p>这种方法要慢很多，因为需要等待图片下载完成之后才能知道图片的宽度和高度。</p>