简单瀑布流实现
Posted The best is yet to come
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单瀑布流实现相关的知识，希望对你有一定的参考价值。
瀑布流通常2种形式
1.固定n列（固定宽度），列中图片高度不等，如 花瓣网 http://huaban.com/all/
2.固定n行（固定高度），行中图片宽度不等，如 百度图片 http://image.baidu.com/search/index
列数可根据浏览器可视化窗口大小改变（也可固定）
原理：在#container定义等宽4列，每一列的高度自动，（ajax获取数据）然后在这4列添加图片；
获取每一列图片的最低（矮）位置，下一个图片（数据）添加到这个位置，并更新这列的高度。用一个4列数组来存放高度，获取最低高度的下标即可
当最低的那列到达可视区的底部，再次加载数据 (当前列的offsetHeight+offsetTop < scrollTop+clientHeight)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>瀑布流</title> 6 <style> 7 * {margin: 0; padding: 0;} 8 #container { width: 1000px; border: 1px solid red; position: relative; margin: 50px auto 0; } 9 #container img { position: absolute; } 10 #loader { width: 100%; height: 60px; background: url(‘loader.gif‘) no-repeat center #FFF; position: fixed; bottom: 0; left: 0; display: none; } 11 </style> 12 <!-- ************* 新浪CDN ***********--> 13 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 14 <script> 15 /* 16 固定列：浮动布局 17 定位 18 */ 19 $(function() { 20 21 var oContainer = $(‘#container‘); 22 //列数 23 var iCells = 0; 24 //每一列的宽度 25 var iWidth = 200; 26 //列的间隙宽 27 var iSpace = 10; 28 var iOuterWidth = iWidth + iSpace; 29 var sUrl = ‘http://www.wookmark.com/api/json/popular?callback=?‘; 30 //图片top 31 var arrT = []; 32 //图片距离left 33 var arrL = []; 34 var iPage = 0; 35 var iBtn = true; 36 37 function setCell() { 38 //设置 列数 = 可视区窗口宽度 / 每列宽度 向下舍整 39 iCells = Math.floor($(window).innerWidth() / iOuterWidth); 40 if (iCells < 3) { 41 iCells = 3; 42 } else if (iCells > 6) { 43 iCells = 6; 44 } 45 //alert(iCells); 46 oContainer.css(‘width‘, iCells * iOuterWidth) - 10; 47 } 48 setCell(); 49 50 for (var i=0; i<iCells; i++) { 51 arrT[i] = 0; 52 arrL[i] = iOuterWidth * i; 53 } 54 //console.log(iCells); 55 //console.log(arrL); 56 57 function getData() { 58 if (!iBtn) { 59 return ; 60 } 61 iBtn = false; 62 iPage++; 63 $.getJSON(sUrl, {page:iPage}, function(jData) { 64 $(‘#loader‘).show(); 65 $.each(jData, function(index, obj) { 66 67 var oImg = $(‘<img />‘); 68 69 //宽高 70 var iHeight = obj.height * (iWidth / obj.width); 71 oImg.css({ 72 width : iWidth, 73 height : iHeight 74 }); 75 76 var _index = getMin(); 77 oImg.css({ 78 left : arrL[_index], 79 top : arrT[_index] 80 }); 81 arrT[_index] += iHeight + 10; // 82 83 oContainer.append(oImg); 84 85 var objImg = new Image(); 86 objImg.onload = function() { 87 oImg.attr(‘src‘, this.src); 88 } 89 objImg.src = obj.preview; 90 91 setTimeout(function() { 92 $(‘#loader‘).hide(); 93 },1000) 94 95 iBtn = true; 96 97 }) 98 99 }); 100 } 101 getData(); 102 //arrT = [11,23,5,7]; 103 // 获取 每一列最短 高度 的下标 104 function getMin() { 105 var v = arrT[0]; 106 var _index = 0; 107 108 for (var i=1; i<arrT.length; i++) { 109 if (arrT[i] < v) { 110 v = arrT[i]; 111 _index = i; 112 } 113 } 114 return _index; 115 } 116 117 //alert(getMin()); 118 119 $(window).on(‘scroll‘, function() { 120 var _index =getMin(); 121 var iH = $(window).scrollTop() + $(window).innerHeight(); 122 document.title = iH + ‘:‘ + (arrT[_index] + 50); 123 if (arrT[_index] + 50 < iH) { 124 getData(); 125 } 126 127 }) 128 129 $(window).on(‘resize‘, function() { 130 var iLen = iCells; 131 setCell(); 132 if (iLen == iCells) { 133 return ; 134 } 135 arrT = []; 136 arrL = []; 137 for (var i=0; i<iCells; i++) { 138 arrT[i] = 0; 139 arrL[i] = iOuterWidth * i; 140 } 141 oContainer.find(‘img‘).each(function() { 142 143 var _index = getMin(); 144 /*$(this).css({ 145 left : arrL[_index], 146 top : arrT[_index] 147 });*/ 148 $(this).animate({ 149 left : arrL[_index], 150 top : arrT[_index] 151 }, 1000); 152 arrT[_index] += $(this).height() + 10; 153 154 }); 155 }) 156 157 158 159 }) 160 </script> 161 </head> 162 163 <body> 164 <div id="container"></div> 165 <div id="loader"></div> 166 </body> 167 </html>
可直接复制运行
以上是关于简单瀑布流实现的主要内容，如果未能解决你的问题，请参考以下文章