瀑布流 &留言板

2023-01-08 09:39:33

实例：瀑布流留言板
（一）瀑布流
瀑布流实现原理分析
1.ajax文件内容
function ajax(method, url, data, success) {
   var xhr = null;
   try {
       xhr = new XMLHttpRequest();
   } catch (e) {
       xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }

   if (method == 'get' && data) {
       url += '?' + data;
   }

   xhr.open(method,url,true);
   if (method == 'get') {
       xhr.send();
   } else {
       xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
       xhr.send(data);
   }

   xhr.onreadystatechange = function() {

       if ( xhr.readyState == 4 ) {
           if ( xhr.status == 200 ) {
               success && success(xhr.responseText);
           } else {
               alert('出错了,Err：' + xhr.status);
           }
       }

   }
}

2.HTML文件内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body { margin:0; }
#ul1 { width:1080px; margin:100px auto 0;}
li { width:247px; list-style:none; float:left; margin-right:10px; }
li div { border:1px solid #000; padding:10px; margin-bottom:10px; }
li div img { width:225px; display:block; }
</style>
<script src="ajax.js"></script>
<script>
   window.onload = function(){
       var oUl = document.getElementById('ul1');
       var aLi = oUl.getElementsByTagName('li');
       var iLen = aLi.length;
       var iPage = 1;
       var b = true; //相当于门/开关（如果门是开的才能进去，然后锁门，做自己的事情，做完，再打开门）


       getList(); //进行第一页的加载

       //获取初始化数据，首先，通过ajax加载数据过来
       function getList(){

           ajax('get','getPics.php','cpage='+iPage,function(data){

           var data = JSON.parse(data);

           //做一下处理，数据不可能无限加载下去，如果数据没了，不能再加载了
           if( !data.length){
              //后续没有数据了
              return; //return出去了，没有机会把门打开了

           }
           //把数据一条一条的添加到页面中
           for(var i=0;i<data.length;i++){

               //获取高度最短的li
               var _index = getShort();

               var oDiv = document.createElement('div');
               var oImg = document.createElement('img');
               oImg.src = data[i].preview;
               oDiv.appendChild(oImg); //把当前图片添加到当前div里
               oImg.style.width = '225px';
               oImg.style.height = data[i].height *(225/data[i].width) + 'px';
               var oP = document.createElement('p');
               oP.innerHTML = data[i].title;
               oDiv.appendChild(oP);

               //把整个div添加到最短li里
               aLi[_index].appendChild(oDiv);
           }
           b = true; //把门打开
       });

       }
       //当滚动条发生滚动时,判断最短的li是否进入可视区
       window.onscroll = function(){
               var _index = getShort();
           var oLi = aLi[_index]; //获取最短的li
           var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

           //如果当前的li的top值+自身的高<可视区的高+滚动条滚动距离
           if( getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight + scrollTop){
               if(b){
                   b = false; //进去以后把门关上，然后做自己的事情
                   iPage++;
                   getList();
                   }
           }
       }

       //找到最短一列li再那，封装一个函数
       function getShort(){
               var index = 0; //初始化
           var ih = aLi[index].offsetHeight;//当前li的高度
           for(var i=1; i<iLen; i++){ //for循环把当前的每一个li取出来
               if(aLi[i].offsetHeight < ih){
               index = i;
               ih = aLi[i].offsetHeight; //ih等于当前高
               }
           }
           return index;
       }

       //封装一个函数，获取一个元素到页面的绝对值
       function getTop(obj){
               var iTop = 0; //初始化为0
           while(obj){ //当obj存在
               iTop += obj.offsetTop;
               obj = obj.offsetParent;
           }
           return iTop;
       }

   }
</script>
</head>

码农公寓

相关文章