zoukankan      html  css  js  c++  java
  • 瀑布流 &留言板

    实例:瀑布流 留言板
    (一)瀑布流
    瀑布流实现原理分析
    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 { 1080px; margin:100px auto 0;}
    li { 247px; list-style:none; float:left; margin-right:10px; }
    li div { border:1px solid #000; padding:10px; margin-bottom:10px; }
    li div img { 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>

    <body>
        <ul id="ul1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    </html>




  • 相关阅读:
    ExecuteScalar requires the command to have a transaction when the connection assigned to the command is in a pending
    如何从vss中分离程序
    String or binary data would be truncated
    the pop3 service failed to retrieve authentication type and cannot continue
    The POP3 service failed to start because
    IIS Error he system cannot find the file specified _找不到页面
    pku2575Jolly Jumpers
    pku2940Wine Trading in Gergovia
    pku3219二项式系数
    pku1029false coin
  • 原文地址:https://www.cnblogs.com/webzwf/p/5712247.html
Copyright © 2011-2022 走看看