jQuery Wookmark 瀑布流布局排序基本示例

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/reset.css">
		<link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/main.css">
		<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
		</script>
		<script src="//ku.shouce.ren/libs/wookmark/js/jquery.imagesloaded.js">
		</script>
		<script src="//ku.shouce.ren/libs/wookmark/js/jquery.wookmark.min.js">
		</script>
	</head>
	<body>
	 <div class="main">
    <div class="inwrap">
      <h1>jQuery Wookmark 瀑布流布局</h1>
      <h2>Example 基本示例</h2>
      
      <div class="detail">
        <p>单击下面的排序选项，对列表进行排序。</p>
      </div>

<div class="example">
        <p id="sortbys" class="button_group">
          <a class="button green active" data-sortby="name" href="javascript://">名称</a>
          <a class="button green" data-sortby="price" href="javascript://">价格</a>
          <a class="button green" data-sortby="popularity" href="javascript://">星级</a>
        </p>
      </div>
      
      <div class="example">
        <div id="main" role="main">
          <ul id="tiles">
            
            <li data-price="20" data-popularity="4" data-name="icebear"><img src="//ku.shouce.ren/libs/wookmark/img/image_1.jpg" height="283" width="200"><p>Icebear / &yen;20 / &#9733;&#9733;&#9733;&#9733;</p></li>
            <li data-price="24" data-popularity="3" data-name="hand"><img src="//ku.shouce.ren/libs/wookmark/img/image_2.jpg" height="300" width="200"><p>Hand / &yen;24 / &#9733;&#9733;&#9733;</p></li>
            <li data-price="12.50" data-popularity="2" data-name="water"><img src="//ku.shouce.ren/libs/wookmark/img/image_3.jpg" height="252" width="200"><p>Water / &yen;12,50 / &#9733;&#9733;</p></li>
            <li data-price="100" data-popularity="1" data-name="runner"><img src="//ku.shouce.ren/libs/wookmark/img/image_4.jpg" height="158" width="200"><p>Runner / &yen;100 / &#9733;</p></li>
            <li data-price="42.12" data-popularity="3" data-name="street"><img src="//ku.shouce.ren/libs/wookmark/img/image_5.jpg" height="300" width="200"><p>Street / &yen;42,12 / &#9733;&#9733;&#9733;</p></li>
            <li data-price="15" data-popularity="1" data-name="bathroom"><img src="//ku.shouce.ren/libs/wookmark/img/image_6.jpg" height="297" width="200"><p>Bathroom / &yen;15 / &#9733;</p></li>
            <li data-price="70" data-popularity="2" data-name="sign"><img src="//ku.shouce.ren/libs/wookmark/img/image_7.jpg" height="200" width="200"><p>Sign / &yen;70 / &#9733;&#9733;</p></li>
            <li data-price="18.99" data-popularity="4" data-name="camera"><img src="//ku.shouce.ren/libs/wookmark/img/image_8.jpg" height="200" width="200"><p>Camera / &yen;18,99 / &#9733;&#9733;&#9733;&#9733;</p></li>
            <li data-price="5" data-popularity="4" data-name="winter"><img src="//ku.shouce.ren/libs/wookmark/img/image_9.jpg" height="398" width="200"><p>Winter / &yen;5 / &#9733;&#9733;&#9733;&#9733;</p></li>
            <li data-price="7" data-popularity="1" data-name="kitchen"><img src="//ku.shouce.ren/libs/wookmark/img/image_10.jpg" height="267" width="200"><p>Kitchen / &yen;7 / &#9733;</p></li>
            
          </ul>
        </div>
      </div>
      
    </div>
  </div>
		<script>
(function ($){
  $('#tiles').imagesLoaded(function(){
    function comparatorName(a, b){
      return $(a).data('name') < $(b).data('name') ? -1 : 1;
    }
    function comparatorPopularity(a, b){
      return $(a).data('popularity') > $(b).data('popularity') ? -1 : 1;
    }
    function comparatorPrice(a, b){
      return $(a).data('price') < $(b).data('price') ? -1 : 1;
    }

// 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
      comparator: comparatorName
    };

// Get a reference to your grid items.
    var $handler = $('#tiles li'),
      $sortbys = $('#sortbys a');

// Call the layout function.
    $handler.wookmark(options);

/**
     * When a filter is clicked, toggle it's active state and refresh.
     */
    var onClickSortBy = function(e) {
      e.preventDefault();
      $currentSortby = $(this);
      switch ($currentSortby.data('sortby')) {
        case 'price':
          options.comparator = comparatorPrice;
          break;
        case 'popularity':
          options.comparator = comparatorPopularity;
          break;
        case 'name':
        default:
          options.comparator = comparatorName;
          break;
      }

$sortbys.removeClass('active');
      $currentSortby.addClass('active');

$handler.wookmark(options);
    }

// Capture filter click events.
    $sortbys.click(onClickSortBy);
  });
})(jQuery);
		</script>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/reset.css">
        <link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/main.css">
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script src="//ku.shouce.ren/libs/wookmark/js/jquery.imagesloaded.js">
        </script>
        <script src="//ku.shouce.ren/libs/wookmark/js/jquery.wookmark.min.js">
        </script>
    </head>
    <body>
     <div class="main">
    <div class="inwrap">
      <h1>jQuery Wookmark 瀑布流布局</h1>
      <h2>Example 基本示例</h2>
      
      <div class="detail">
        <p>单击下面的排序选项，对列表进行排序。</p>
      </div>