ajaxWaterfall/index.html at master · nonoma/ajaxWaterfall · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    #ul1 {
        width: 1040px;
        margin: 0 auto;
    }

    #ul1 li {
        width: 250px;
        margin: 0 10px 10px 0;
        float: left;
        list-style: none;
    }

    #ul1 li div {
        border: 1px solid #000;
        margin-bottom: 10px;
    }

    #ul1 li img {
        display: block;
        width: 248px;
    }
    </style>
</head>

<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src="js/ajax.js"></script>
    <script>
    function preloadimages(arr, success) {
        var newimages = [],
            loadedimages = 0
        var arr = (typeof arr != "object") ? [arr] : arr;

        function imageloadpost() {
            loadedimages++
            if (loadedimages == arr.length) {
                success();
            }
        }
        for (var i = 0; i < arr.length; i++) {
            newimages[i] = new Image()
            newimages[i].src = arr[i]
            newimages[i].onload = function() {
                imageloadpost()
            }
            newimages[i].onerror = function() {
                imageloadpost()
            }
        }
    }

    function addContent(data) {
        var d = JSON.parse(data);
        var oLi = document.getElementsByTagName('li');
        var arrImg = [];
        for (var j = 0; j < d.length; j++) {
            arrImg.push(d[j].image);
        }
        for (var i = 0; i < d.length; i++) {
            var oDiv = document.createElement('div');
            var oImg = document.createElement('img');
            oImg.src = d[i].image;

            var oP = document.createElement('p');
            oP.innerHTML = d[i].title;
            oDiv.appendChild(oImg);

            oImg.style.height = d[i].height * (249 / d[i].width) + 'px';
            oDiv.appendChild(oP);
            var iH = oLi[0].offsetHeight;
            var index = 0;
            for (var j = 1; j < oLi.length; j++) {
                if (iH > oLi[j].offsetHeight) {
                    index = j;
                    iH = oLi[j].offsetHeight;
                }
            }
            oLi[index].appendChild(oDiv);
        }
            preloadimages(arrImg, function() {
                cpageIndex++;
                ajax({
                    method: 'get',
                    url: 'getPics.php',
                    data: 'cpage=' + cpageIndex,
                    success: function(data) {
                        addContent(data);
                    }
                });
            });
    }
    var cpageIndex = 1;
    ajax({
        method: 'get',
        url: 'getPics.php',
        data: 'cpage=' + cpageIndex,
        success: function(data) {
            addContent(data);

        }
    });
    </script>
</body>

</html>