ウェブ学のすすめ

Study of Web Design & Programing

Wookmark jQueryのAPIを使って無限スクロール

API jQuery


f:id:vinton:20130401005634p:plain

前回ご紹介したグリッドレイアウトができるjqueryプラグインのうちWookmark jQueryのAPIを使って無限スクロールのサンプルを作ってみました。ほぼ公式サイトのデモのままですが表示させるものを変更しています。


参考

Wookmark jQuery Plugin


Wookmark API



Demo


動作チェック
  • Chrome 〇
  • Firefox　〇
  • IE 9以降　〇
  • IE8以下　×（無限スクロールが効かない）
  • Safari　〇
  • iPhone ×（読み込み中のままになっている。※）
  • iPad 〇

※原因は調査中。

HTML

jquery.jsとjquery.wookmark.jsを読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>jQuery Wookmark Plug-in API Demo</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="container">
<header>
<h1>jQuery Wookmark Plug-in API Demo</h1>
</header>
<div id="main" role="main">
<ul id="tiles"></ul>
<div id="loader">
<div id="loaderCircle"></div>
</div>
</div>
<footer></footer>
</div>
<script src="http://webgaku.biz/js/jquery-1.7.1.min.js"></script>
<script src="http://webgaku.biz/js/jquery.wookmark.min.js"></script>
</body>
</html>
CSS

スタイルシート抜粋

/**
 * Grid container
 */
#tiles {
list-style-type: none;
position: relative; /** Needed to ensure items are laid out relative to this container **/
margin: 0;
}

/**
 * Grid items
 */
#tiles li {
width: 200px;
background-color: #ffffff;
border: 1px solid #dedede;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
display: none; /** Hide items initially to avoid a flicker effect **/
  cursor: pointer;
padding: 4px;
}

#tiles li img {
display: block;
}

/**
 * Grid item text
 */
#tiles li p {
color: #666;
font-size: 11px;
line-height: 16px;
margin: 6px 0 1px 7px;
}

/** General page styling **/


#main {
padding: 30px 0 30px 0;
}

header h1 {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    margin: 30px 0 3px 0;
    
    font-weight: 100;
    line-height: 50px;
    text-transform: lowercase;
    color: inherit;
    text-rendering: optimizelegibility;
}

header p {
text-align: center;
font-size: 13px;
color: #777;
margin: 0;
}


/** Loader **/
  
#loader {
  height: 16px;
  text-align: center;
  padding: 25px 0 25px 0;
}
  
#loaderCircle {
  width: 16px;
  height: 16px;
margin: 0 auto;
  background-image: url(http://jsrun.it/assets/2/g/c/P/2gcPK.gif);
}
Javascript

apiURLとoptionsのcontainerを変更したぐらいであとは公式デモと同じです。

var handler = null;
    var page = 1;
    var isLoading = false;
    var apiURL = 'http://www.wookmark.com/api/json?type=group&groupId=6961';

    var options = {
      autoResize: true,
      container: $('#main'),
      offset: 2,
      itemWidth: 210
    };

    /**
     * When scrolled all the way to the bottom, add more tiles.
     */
    function onScroll(event) {
      // Only check when we're not still waiting for data.
      if(!isLoading) {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
        if(closeToBottom) {
          loadData();
        }
      }
    };

    /**
     * Refreshes the layout.
     */
    function applyLayout() {
      // Create a new layout handler.
      handler = $('#tiles li');
      handler.wookmark(options);
    };

    /**
     * Loads data from the API.
     */
    function loadData() {
      isLoading = true;
      $('#loaderCircle').show();

      $.ajax({
        url: apiURL,
        dataType: 'jsonp',
        data: {page: page}, // Page parameter to make sure we load new data
        success: onLoadData
      });
    };

    /**
     * Receives data from the API, creates HTML for images and updates the layout
     */
    function onLoadData(data) {
      isLoading = false;
      $('#loaderCircle').hide();

      // Increment page index for future calls.
      page++;

      // Create HTML for the images.
      var html = '';
      var i=0, length=data.length, image;
      for(; i<length; i++) {
        image = data[i];
        html += '<li>';

        // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
        html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">';

        // Image title.
        html += '<p>'+image.title+'</p>';

        html += '</li>';
      }

      // Add image HTML to the page.
      $('#tiles').append(html);

      // Apply layout.
      applyLayout();
    };

    $(document).ready(new function() {
      // Capture scroll event.
      $(document).bind('scroll', onScroll);

      // Load first data from the API.
      loadData();
    });