js中用ajax实现瀑布流
HTML代码：
1 <html> 2 <head> 3 <title>瀑布流布局</title> 4 <meta charset="utf-8" /> 5 <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> --> 6 <!-- // <script type="text/javascript" src="js/script.js"></script> --> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 .pic { 13 font-size: 0; 14 padding: 10px; 15 border: 1px solid #ccc; 16 } 17 18 .box { 19 float: left; 20 padding-left: 20px; 21 padding-top: 20px; 22 } 23 24 img { 25 width: 200px; 26 height: auto; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="main"> 32 <div class="box"> 33 <div class="pic"> 34 <img src="imgs/img (1).jpg"> 35 </div> 36 </div> 37 <div class="box"> 38 <div class="pic"> 39 <img src="imgs/img (2).jpg"> 40 </div> 41 </div> 42 <div class="box"> 43 <div class="pic"> 44 <img src="imgs/img (4).jpg"> 45 </div> 46 </div> 47 <div class="box"> 48 <div class="pic"> 49 <img src="imgs/img (5).jpg"> 50 </div> 51 </div> 52 <div class="box"> 53 <div class="pic"> 54 <img src="imgs/img (6).jpg"> 55 </div> 56 </div> 57 <div class="box"> 58 <div class="pic"> 59 <img src="imgs/img (7).jpg"> 60 </div> 61 </div> 62 <div class="box"> 63 <div class="pic"> 64 <img src="imgs/img (8).jpg"> 65 </div> 66 </div> 67 <div class="box"> 68 <div class="pic"> 69 <img src="imgs/img (9).jpg"> 70 </div> 71 </div> 72 <div class="box"> 73 <div class="pic"> 74 <img src="imgs/img (10).jpg"> 75 </div> 76 </div> 77 <div class="box"> 78 <div class="pic"> 79 <img src="imgs/img (11).jpg"> 80 </div> 81 </div> 82 <div class="box"> 83 <div class="pic"> 84 <img src="imgs/img (12).jpg"> 85 </div> 86 </div> 87 <div class="box"> 88 <div class="pic"> 89 <img src="imgs/img (13).jpg"> 90 </div> 91 </div> 92 <div class="box"> 93 <div class="pic"> 94 <img src="imgs/img (14).jpg"> 95 </div> 96 </div> 97 <div class="box"> 98 <div class="pic"> 99 <img src="imgs/img (15).jpg"> 100 </div> 101 </div> 102 <div class="box"> 103 <div class="pic"> 104 <img src="imgs/img (16).jpg"> 105 </div> 106 </div> 107 <div class="box"> 108 <div class="pic"> 109 <img src="imgs/img (17).jpg"> 110 </div> 111 </div> 112 <div class="box"> 113 <div class="pic"> 114 <img src="imgs/img (18).jpg"> 115 </div> 116 </div> 117 <div class="box"> 118 <div class="pic"> 119 <img src="imgs/img (19).jpg"> 120 </div> 121 </div> 122 <div class="box"> 123 <div class="pic"> 124 <img src="imgs/img (20).jpg"> 125 </div> 126 </div> 127 <div class="box"> 128 <div class="pic"> 129 <img src="imgs/img (21).jpg"> 130 </div> 131 </div> 132 <div class="box"> 133 <div class="pic"> 134 <img src="imgs/img (22).jpg"> 135 </div> 136 </div> 137 <div class="box"> 138 <div class="pic"> 139 <img src="imgs/img (23).jpg"> 140 </div> 141 </div> 142 <div class="box"> 143 <div class="pic"> 144 <img src="imgs/img (24).jpg"> 145 </div> 146 </div> 147 <div class="box"> 148 <div class="pic"> 149 <img src="imgs/img (25).jpg"> 150 </div> 151 </div> 152 <div class="box"> 153 <div class="pic"> 154 <img src="imgs/img (26).jpg"> 155 </div> 156 </div> 157 <div class="box"> 158 <div class="pic"> 159 <img src="imgs/img (27).jpg"> 160 </div> 161 </div> 162 <div class="box"> 163 <div class="pic"> 164 <img src="imgs/img (28).jpg"> 165 </div> 166 </div> 167 </div> 168 <div id="to-top" style="width:40px;height:40px;position:fixed;bottom:0;right:0;display:none;background-image:url('imgs/toTop.png')"></div> 169 <script type="text/javascript" src="../../utility.js"></script> 170 <script type="text/javascript" src="js/script.js"></script> 171 </body> 172 173 </html>
js代码：
1 window.onload = function () { 2 warterfall(); 3 4 appendOnScroll(); 5 6 addGo2Top(); 7 } 8 9 function addGo2Top () { 10 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 11 var toTopDiv = document.getElementById('to-top'); 12 13 toTopDiv.onclick = function () { 14 document.documentElement.scrollTop = 0; 15 document.body.scrollTop = 0; 16 } 17 if (scrollTop > 1000) { 18 toTopDiv.style.display = 'block'; 19 } else { 20 toTopDiv.style.display = 'none'; 21 } 22 } 23 24 function appendOnScroll() { 25 26 function needLoad () { 27 var boxes = document.getElementsByClassName('box'); 28 var lastBoxTop = boxes[boxes.length-1].offsetTop; 29 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 30 var clientH = document.documentElement.clientHeight || document.body.clientHeight; 31 return (lastBoxTop < scrollTop+clientH) ? true : false; 32 } 33 34 function loadData (fn) { 35 //通过ajax，异步读取新图片数据 36 utility.Ajax.send('get', 'data.json', true, successFn); 37 38 //ajax的成功时候的回调函数。 39 function successFn(resp) { 40 var data = JSON.parse(resp); 41 var imgs = data.imgs; 42 //当ajax取得数据成功后，我们imgs这个数组提取出来， 43 //通过loadData的参数（回调函数）返回给loadData的调用者 44 fn(imgs); 45 } 46 47 } 48 49 function appendABox (imgPath) { 50 var mainDiv = document.getElementById('main'); 51 var box = document.createElement('div'); 52 box.className = 'box'; 53 var pic = document.createElement('div'); 54 pic.className = 'pic'; 55 var img = document.createElement('img'); 56 img.src = imgPath; 57 pic.appendChild(img); 58 box.appendChild(pic); 59 mainDiv.appendChild(box); 60 } 61 62 63 window.onscroll = function () { 64 65 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 66 var toTopDiv = document.getElementById('to-top'); 67 if (scrollTop > 1000) { 68 toTopDiv.style.display = 'block'; 69 } else { 70 toTopDiv.style.display = 'none'; 71 } 72 if (needLoad() === true) { 73 74 loadData(function(data) { 75 76 for (var i=0; i<data.length; i++) { 77 appendABox(data[i].src); 78 } 79 80 warterfall(); 81 }); 82 83 } 84 } 85 86 } 87 function warterfall() { 88 var boxes = document.getElementsByClassName('box'); 89 90 var hArray = [] 91 var clientW = document.documentElement.clientWidth || document.body.clientWidth; 92 var boxW = boxes[0].offsetWidth; 93 var colCount = Math.floor(clientW/boxW); 94 for (var i=0; i<boxes.length; i++) { 95 if (i<colCount) { 96 hArray.push(boxes[i].offsetHeight); 97 } else { 98 var minH = hArray[0], minIndex = 0; 99 for (var j=0; j<hArray.length; j++) { 100 if (hArray[j] < minH) { 101 minH = hArray[j]; 102 minIndex = j; 103 } 104 } 105 106 boxes[i].style.position = 'absolute'; 107 boxes[i].style.top = minH + 'px'; 108 boxes[i].style.left = boxes[minIndex].offsetLeft + 'px'; 109 110 hArray[minIndex] += boxes[i].offsetHeight; 111 } 112 } 113 }
utility.js代码：
1 var utility = { 2 Ajax: { 3 send: function (method, url, asyn, successFn, errorFn) { 4 var AJAX_RESPONSE_STATUS_OK = (location.protocol==='file:') ? 0 : 200; 5 var xhr = new XMLHttpRequest(); 6 xhr.onreadystatechange = function() { 7 if (xhr.readyState === 4) { 8 if (xhr.status === AJAX_RESPONSE_STATUS_OK) { 9 if (typeof successFn === 'function') { 10 successFn(xhr.responseText) 11 } 12 } else { 13 if (typeof errorFn === 'function') { 14 errorFn(xhr.status); 15 } 16 } 17 } 18 } 19 20 xhr.open(method, url, asyn); 21 xhr.send(); 22 } 23 } 24 }
data.json数据：
{
"imgs": [{
"src": "imgs/img (28).jpg"
}, {
"src": "imgs/img (29).jpg"
}, {
"src": "imgs/img (30).jpg"
}, {
"src": "imgs/img (31).jpg"
}, {
"src": "imgs/img (32).jpg"
}, {
"src": "imgs/img (33).jpg"
}, {
"src": "imgs/img (34).jpg"
}]
}
imgs图片暂不提供
