jquery wookmark瀑布流插件
http://code.ciaoca.com/jquery/wookmark/
本次在移动端使用和pc端存在一点点区别，主要区别在于图片宽度使用百分比，等于将响应式变为了宽度自适应。pc端将width固定即可。
效果
移动端
pc端
<!-- CSS Reset -->
<link href="../../siteFile/content/Wookmark-jQuery-1.4.8/css/reset.css" rel="stylesheet" />
<!-- Global CSS for the page and tiles -->
<link href="../../siteFile/content/Wookmark-jQuery-1.4.8/css/main.css" rel="stylesheet" />
<!-- include jQuery -->
<script src="../../siteFile/content/Wookmark-jQuery-1.4.8/libs/jquery.min.js"></script>
<!-- Include the imagesLoaded plug-in -->
<script src="../../siteFile/content/Wookmark-jQuery-1.4.8/libs/jquery.imagesloaded.js"></script>
<!-- Include the plug-in -->
<script src="../../siteFile/content/Wookmark-jQuery-1.4.8/jquery.wookmark.js"></script>
1 <div id="main" role="main"> 2 3 <ul id="tiles"> 4 <!-- These is where we place content loaded from the Wookmark API --> 5 </ul> 6 <div id="loader"> 7 <!-- 加载中 --> 8 <div id="loaderCircle"></div> 9 <!-- 没有了 --> 10 <div class="loaderOver">没有更多了哦~(*^__^*) 嘻嘻……</div> 11 </div> 12 </div>
1 (function ($) { 2 var $tiles = $('#tiles'), 3 $handler = $('li', $tiles), 4 page = 1, 5 isLoading = false, 6 apiURL = 'index.aspx/GetWorksInfo', 7 lastRequestTimestamp = 0, 8 resizeDelay = 50, 9 fadeInDelay = 1000, 10 $window = $(window), 11 $document = $(document); 12 13 // Prepare layout options. 14 var options = { 15 autoResize: true, // This will auto-update the layout when the browser window is resized. 16 container: $('#tiles'), // Optional, used for some extra CSS styling 17 offset: 2, // Optional, the distance between grid items 18 itemWidth: "49%", // Optional, the width of a grid item 19 }; 20 21 /** 22 * When scrolled all the way to the bottom, add more tiles. 23 */ 24 function onScroll(event) { 25 // Only check when we're not still waiting for data. 26 if (!isLoading) { 27 // Check if we're within 100 pixels of the bottom edge of the broser window. 28 var closeToBottom = ($window.scrollTop() + $window.height() > $document.height() - 100); 29 if (closeToBottom) { 30 // Only allow requests every second 31 var currentTime = new Date().getTime(); 32 if (lastRequestTimestamp < currentTime - 1000) { 33 lastRequestTimestamp = currentTime; 34 loadData(); 35 } 36 } 37 } 38 }; 39 40 /** 41 * Refreshes the layout. 42 */ 43 function applyLayout($newImages) { 44 //这里一定要先添加到页面，不然会导致页面第一次变形 45 $tiles.append($newImages); 46 options.container.imagesLoaded(function () { 47 // Destroy the old handler 48 if ($handler.wookmarkInstance) { 49 $handler.wookmarkInstance.clear(); 50 } 51 52 // Create a new layout handler. 53 $handler = $('li', $tiles); 54 $handler.wookmark(options); 55 56 // Set opacity for each new image at a random time 57 $newImages.each(function () { 58 var $self = $(this); 59 window.setTimeout(function () { 60 $self.css('opacity', 1); 61 }, Math.random() * fadeInDelay); 62 }); 63 }); 64 }; 65 66 /** 67 * Loads data from the API. 68 */ 69 function loadData() { 70 isLoading = true; 71 $('#loaderCircle').show(); 72 73 $.ajax({ 74 url: apiURL, 75 type: "POST", 76 dataType: 'json', // Set to jsonp if you use a server on a different domain and change it's setting accordingly 77 data: JSON.stringify({ "pageIndex": page }), // Page parameter to make sure we load new data 78 contentType: "application/json; charset=utf-8", 79 async: true, 80 error: function (e) { 81 alert("请求过于频繁！"); 82 }, 83 success: onLoadData 84 }); 85 }; 86 87 /** 88 * Receives data from the API, creates HTML for images and updates the layout 89 */ 90 function onLoadData(response) { 91 isLoading = false; 92 $('#loaderCircle').hide(); 93 94 // Increment page index for future calls. 95 page++; 96 97 // Create HTML for the images. 98 var html = '', 99 data = response.d.Data, 100 i = 0, length = data.length, image, opacity, 101 $newImages; 102 103 $.each(data, function (i, image) { 104 105 html += '<li style="width: 49%;">'; 106 html += '<a href="javascript:void(0)" title="' + image.Name + '">'; 107 // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that). 108 html += '<img src="' + image.ImageUrl + '" style="width:100%" >'; 109 html += '</a>'; 110 // Image title. 111 html += '<div class="col-xs-6 col-md-6 text-left piaobian">NO<span>' + image.Number + '</span></div>'; 112 html += '<div class="col-xs-6 col-md-6 text-center piaoshu"><span>' + image.VoteCount + '</span>票</div><p></p>'; 113 html += '<button type="button" class="btn-lg btn-block ttyp">投TA一票</button>'; 114 html += '</li>'; 115 116 }); 117 $newImages = $(html); 118 119 // Disable requests if we reached the end 120 if (response.d.Msg == 'NoMore') { 121 $document.off('scroll', onScroll); 122 $(".loaderOver").show(); 123 } 124 125 // Apply layout. 126 applyLayout($newImages); 127 128 }; 129 130 // Capture scroll event. 131 $document.on('scroll', onScroll); 132 133 // Load first data from the API. 134 loadData(); 135 })(jQuery);
1 /// <summary> 2 /// 获取作品数据 3 /// </summary> 4 /// <param name="pageIndex">当前页码，1开始</param> 5 /// <returns></returns> 6 [System.Web.Services.WebMethod] 7 public static object GetWorksInfo(int pageIndex) 8 { 9 ResultInfo<object> result = new ResultInfo<object> 10 { 11 Result = false, 12 Msg = "未知错误", 13 Data = "" 14 }; 15 16 if (pageIndex > 5) 17 { 18 result.Result = true; 19 result.Msg = "NoMore"; 20 return result; 21 } 22 23 List<object> dataResult = new List<object>(); 24 25 for (int i = 0; i < 5; i++) 26 { 27 dataResult.Add(new 28 { 29 Number = i, 30 Name = "头像", 31 VoteCount = 20 + i, 32 ImageUrl = "/siteFile/image/1.png", 33 }); 34 } 35 36 for (int j = 5; j < 10; j++) 37 { 38 dataResult.Add(new 39 { 40 Number = j, 41 Name = "头像", 42 VoteCount = 54 + j, 43 ImageUrl = "/siteFile/image/2.jpg", 44 }); 45 } 46 47 result.Data = dataResult; 48 49 //保存成功 50 result.Result = true; 51 result.Msg = NewsConts.OPERATIONSUCCESS; 52 return result; 53 }
注：官方源码中将$tiles.append($newImages);放在了 options.container.imagesLoaded中，这样可能会导致加载时无法获取图片高度导致图片重叠。
如发生上述重叠情况，将$tiles.append($newImages);拿到前面即可，即先添加图片到页面，才能准确的获取。
