瀑布流 · Javascript核心基础

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0 } #container { width: 1000px; border: 1px solid red; margin: 50px auto 0; position: relative; } #container img { position: absolute; } #loader { width: 100%; height: 60px; background: no-repeat center pink; position: fixed; bottom: 0; left: 0 } </style> <script src='jquery-2.0.3.js'></script> <script> $(function () { //计算列 var oContainer = $('#container'); var oLoader = $('#loader'); var iWidth = 200; //列宽 var iSpace = 10; //间隔宽 var iOuterWidth = iWidth + iSpace; //实际宽 var iCells = 0; //总列 var sUrl = 'http://www.wookmark.com/api/json/popular?callback=?'; var iPage = 0; var iBtn = true; var arrT = []; var arrL = []; function setCells() { iCells = Math.floor($(window).innerWidth() / iOuterWidth); if(iCells<3)iCells=3; if(iCells>6)iCells=6; document.title = iCells; oContainer.css('width', iOuterWidth * iCells - iSpace); } setCells(); for (var i = 0; i < iCells; ++i) { arrT.push(0); arrL.push(i * iOuterWidth); } // console.log(arrL); function getData(){ iBtn = false; oLoader.show(); $.getJSON(sUrl, `page=${iPage}`, function (data) { // console.log(data); $.each(data, function (index, obj) { var oImg = $('<img/>'); oImg.attr('src', obj.preview); oContainer.append(oImg); var iHeight = iWidth / obj.width * obj.height; //不通过oImg.height()来获取的原因在于图片可能还没加载完那么数值就会不正确 // console.log(iHeight) oImg.css({ width:iWidth ,height:iHeight }); //获取arrT最小值所在的位置 var iMinIndex = getMin(); // console.log(iMinIndex) // console.log(arrL) //设置定位 oImg.css({ left: arrL[iMinIndex] , top: arrT[iMinIndex] }); arrT[iMinIndex] += iHeight + 10; // console.log(arrT) }); oLoader.hide(); iBtn = true; }); } getData(); $(window).on('scroll',function(){ var iH = $(window).scrollTop()+$(window).innerHeight(); //视口下沿距离文档顶部的位置 var iMinIndex = getMin(); if(arrT[iMinIndex] + oContainer.offset().top<iH){//滚动到最短的那一列已经出现空白时就加载 if(iBtn){ iPage++; getData(); } } }) $(window).on('resize',function(){ var iOldCells = iCells; setCells(); if(iOldCells == iCells)return; //resize还要检测列变化后是否出现空白出现的话就要加载更多 var iH = $(window).scrollTop()+$(window).innerHeight(); //视口下沿距离文档顶部的位置 var iMinIndex = getMin(); if(arrT[iMinIndex] + oContainer.offset().top<iH){//滚动到最短的那一列已经出现空白时就加载 if(iBtn){ iPage++; getData(); } } //异步问题？ arrT = []; arrL = []; for(var i=0;i<iCells;++i){ arrT.push(0); arrL.push(i * iOuterWidth); } var aImgs = oContainer.find('img'); aImgs.each(function(index,obj){ var iMinIndex = getMin(); // $(this).css({ // left: arrL[iMinIndex] // , top: arrT[iMinIndex] // }); $(this).animate({ left:arrL[iMinIndex] ,top:arrT[iMinIndex] }) arrT[iMinIndex] += $(this).height() + 10; }); }) function getMin() { var iv = arrT[0]; var _index = 0; for (var i = 1; i < arrT.length; ++i) { if (arrT[i] < iv) { iv = arrT[i]; _index = i; } } return _index; } }) </script> </head> <body> <div id="container"></div> <div id="loader"></div> </body> </html> ```