jQ.Ajax实现瀑布流相册

发表于 | 分类于 |

.本文使用jQuery的ajax技术读取数据，为了实现跨域采用了代理的方法。ajax直接访问的url为服务器中的getPics.php文件，在php文件中访问了目标接口http://www.wookmark.com/api/json/popular

效果看一下：



JS核心代码：

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
(function () {
    // 使用立即执行函数（函数自调用）防止全局污染
    var num = 1;
    var oLi = $('li');
    var flag = false;//起到锁的作用，防止ajax在渲染过程中一直请求数据
    getData();
    function getData() {
        if (!flag && window.dataFlag != '[]') {
            flag = true;//上锁
            $.ajax({
                type: "GET",
                url: "http://localhost/web/ajax/waterfall_Image/src/getPics.php?cpage=" + num,
                success: addDom,
                beforeSend: function () {
                    $('.loading').show();
                },
                error: function () {
                    console.log('ERROR');
                },
                complete: function (data) {
                    window.dataFlag = data.responseText;//加个dataFlag，用于监测数据是否已经完全取空
                }
            });
            num++;
        }
    }

    function addDom(data) {
        $('.loading').hide();
        var dataList = JSON.parse(data);
        console.log(dataList);
        if (dataList.length) {
            dataList.forEach(function (ele, index) {
                var iDiv = $('<div class="item"></div>');
                var imgBox = $("<div class='image'></div>");
                var oImg = new Image();
                var oP = $('<p></p>');
                oP.text(ele.title);
                oImg.src = ele.preview;
                oImg.onload = function () {
                    imgBox.append(oImg);
                    iDiv.append(imgBox).append(oP);
                    var index = getMinList(oLi);
                    $(oLi[index]).append(iDiv);
                }
            });
        }
        flag = false; //ajax获取并且页面数据渲染完成了，该flag为false，使下次loading时得以继续Ajax请求数据
    }

    function getMinList(dom) {
        var minHeight = parseInt($(dom[0]).css('height'));
        var index = 0;
        for (var i = 1; i < dom.length; i++) {
            var height = parseInt($(dom[i]).css('height'));
            if (height < minHeight) {
                minHeight = height;
                index = i;
            }
        }
        return index;
    }


    $(window).scroll(function () {
        var scrollHeight = $(window).scrollTop();
        var clientHeight = $(window).height();
        var minLiH = parseInt($(oLi[getMinList(oLi)]).css('height'));
        if (scrollHeight + clientHeight > minLiH) {
            getData();
        }
    })

})()

php文件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* getPics.php */

<?php
header('Content-type:text/html; charset="utf-8"');

/*
API:
	getPics.php

		参数
		cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);

echo $content;

?>