三、瀑布流中的ajax請求詳解

html代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>瀑布流第三步ajax請求實現</title> 
<style> 
    *{margin:0px;padding:0px;} 
    #main .pin{ 
        width:225px; 
        height:auto; 
        padding:15px 0px 0px 15px; 
        float:left; 
    } 
 
    #main .pin .box{ 
        width:205px; 
        height:auto; 
        padding:10px; 
        background:#FFF; 
        border:1px solid #CCC; 
        box-shadow:0px 0px 6px #CCC; 
        border-radius:5px; 
    } 
    #main .pin .box img{ 
        width:205px; 
    } 
</style> 
<!-- 頁面拖拽插件 --> 
<script type="text/javascript" src="./js/drag.js"></script> 
<!-- 瀑布流封裝 --> 
<script type="text/javascript" src="./js/water.js"></script> 
<!-- 引入js --> 
<script type="text/javascript" src="./js/jquery.js"></script> 
</head> 
<body> 
 
    <div id="main"> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/0.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/1.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/2.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/3.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/4.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/6.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/7.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/8.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/4.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/7.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/8.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/9.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/0.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/1.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/2.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/4.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/0.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/1.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/3.jpg"> 
            </div> 
        </div> 
    </div> 
     
</body> 
</html>

water.js代碼

/** 
 *  
 */ 
window.onload = function(){ 
    //0調用函數 
    waterfall('main','pin'); 
    var ajaxState = true; 
    window.onscroll = function(){ 
         
        if(checkscrollsite() && ajaxState){ 
            ajaxState = false; 
            $.ajax({ 
                type:'GET', 
                url:'request.php', 
                data:'', 
                dataType:'json', 
                //請求開始 
                beforeSend:function(){ 
                    var oParent = document.getElementById('main'); 
                    var aPin = getClassObj(oParent,'pin'); 
                    var lastPinH =aPin[aPin.length-1].offsetTop+aPin[aPin.length-1].offsetHeight; 
                    //加入正在加載圖標 
                    var loadImg = document.createElement('img'); 
                    loadImg.src = './img/load.gif'; 
                    loadImg.id = 'loadImg'; 
                    oParent.appendChild(loadImg); 
                    loadImg.style.position = 'absolute'; 
                    loadImg.style.top = lastPinH+500+'px'; 
                    loadImg.style.left = Math.floor(oParent.offsetWidth-loadImg.offsetWidth)+'px'; 
                }, 
                //請求中 
                success:function(data){ 
                     
                    //創建父節點 
                    var oParent = document.getElementById('main'); 
                    for(i in data){ 
                        //alert(data[i].src); 
                        //創建父級的元素節點 
                        var oPin = document.createElement('div'); 
                        oPin.className = 'pin'; 
                        oParent.appendChild(oPin); 
                        var oBox = document.createElement('div'); 
                        oBox.className = 'box'; 
                        oPin.appendChild(oBox); 
                        var oImg = document.createElement('img'); 
                        oImg.src = './img/'+data[i].src; 
                        oBox.appendChild(oImg); 
                    } 
                    waterfall('main','pin'); 
                }, 
                //請求完成 
                complete:function(){ 
                    //請求完成之後去掉加載的圖標 
                    document.getElementById('main').removeChild(document.getElementById('loadImg')); 
                    ajaxState = true; 
                } 
            }) 
             
        } 
         
    } 
} 
    /** 
    parent 父級   id 
    pin     具體瀑布流塊，class類名 
    */ 
    function waterfall(parent,pin) { 
    //2.定義父級 
    var oParent = document.getElementById(parent); 
    //9.調用函數並定義 
    var aPin = getClassObj(oParent,pin); 
    //alert(aPin.length); 
    var iPinW = aPin[0].offsetWidth; 
    //alert(iPinW); 
    //10.計算頁面可以放下多少個圖片 
    var num = Math.floor(document.documentElement.clientWidth/iPinW); 
    //alert(num); 
    //11.設置父級居中的樣式 
    oParent.style.cssText = 'width:'+num*iPinW+'px;margin:0 auto;'; 
     
    //12準備一個數組 
    var compareAarr = []; 
    //17定義一個字符串 
    //var str = ''; 
    //13 
    for(var i=0;i<aPin.length;i++){ 
        //22設置第一行的數量 
        if(i<num){ 
             
         
        //獲取每個圖品的offsetHeight值 
        compareAarr[i] = aPin[i].offsetHeight; 
        //17獲取高度的索引 
        //str += i+'=>'+aPin[i].offsetHeight+'\n'; 
        //23 
        }else{ 
            //取數組中的最小高度  compareAarr 
            var minH = Math.min.apply({},compareAarr); 
            //獲取最小的key值 
            var minKey = getMinKey(compareAarr,minH); 
            //定位超出寬度多的那個 
            aPin[i].style.position = 'absolute'; 
            //取超出的那個圖片的top值 
            aPin[i].style.top = minH + 'px'; 
            //設置超出那個圖片的left值 
            aPin[i].style.left = aPin[minKey].offsetLeft + 'px'; 
            //超出最後一個在加一 重新計算最低minH 
            compareAarr[minKey] += aPin[i].offsetHeight; 
        } 
    } 
     
    //實現圖片的拖拽 
    for(var i=num;i<aPin.length;i++){ 
        //絕對定位 
        aPin[i].style.position = 'absolute'; 
        drag(aPin[i]); 
    } 
} 
     
    /** 
     * 檢測根據瀏覽器的高度加載圖片 
     */ 
    function checkscrollsite(){ 
        var oParent = document.getElementById('main'); 
         
        var aPin = getClassObj(oParent,'pin'); 
        //最後圖片的高度 
        var lastPinH =aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2); 
        //最後滾動條的高度 
        var srcollTop = document.documentElement.scrollTop || document.body.scrollTop; 
        // 
        var documentH = document.documentElement.clientHeight; 
        //if(lastPinH<srcollTop+documentH){ 
        //  return true; 
        //}else{ 
        //  return false; 
        //} 
        return lastPinH<srcollTop+documentH?true:false; 
    } 
    /** 
        獲取數組組最小的鍵值 
        arr數組 
        minH最小鍵值 
    */ 
    //18定義一個函數   獲取數組(compareAarr)中對應的最小的那個高的值(minH) 
    function getMinKey(arr,minH){ 
        for(key in arr){ 
            if(arr[key] == minH){ 
                return key; 
            } 
        } 
    } 
     
    /** 
        通過class選擇元素 
        parent父級 
        className類名 
    */ 
    //3.定義一個函數 
    function getClassObj(parent,className){ 
        //4.定義匹配父級下面所有的元素 
        var obj = parent.getElementsByTagName('*'); 
        //5.定義一個數組 
        var result = []; 
        //6.循環obj 
        for(var i=0;i<obj.length;i++){ 
            if(obj[i].className == className){ 
                //7.pushu進result中 
                result.push(obj[i]); 
            } 
        } 
        //8 
        return result; 
    }

request.php 代碼

<?php 
header('Content-type:text/html; charset=utf-8'); 
$mysql = mysql_connect('localhost','root',''); 
mysql_query('set names utf8',$mysql); 
mysql_select_db('waterfall',$mysql); 
$rows = mysql_query('select * from waterfall limit 0 , 20'); 
$data = array(); 
while ($row = mysql_fetch_assoc($rows)){ 
    $data[] = $row;  
} 
sleep(3); 
echo json_encode($data);

表結構代碼：

CREATE TABLE `waterfall` ( 
  `id` int(11) NOT NULL auto_increment, 
  `title` char(128) NOT NULL, 
  `src` varchar(1024) NOT NULL, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=66 ;

加載需要使用的圖片

請右鍵另存爲即可用

實現效果圖：

三、瀑布流中的ajax請求詳解

Win10 LTSC 2019 安裝後的一些步驟

推薦2款開源、美觀的WinForm UI控件庫

NET9 AspnetCore將整合OpenAPI的文檔生成功能而無需三方庫

在Linux下管理MySQL的大小寫敏感性

Mysql字段數據類型Decimal 與Double區別的分析

一、後臺首頁index.php【dedecms後臺源碼分析】

二、後臺登陸login.php【dedecms後臺源碼分析】

三、瀑布流中的ajax請求詳解

我的友情鏈接

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結