直接贴源码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
}
.box {
padding:5px;
float: left;
}
.border_img {
border: 1px solid #ccc;
border-radius:5px;
box-shadow:0 0 5px #ccc;
padding: 5px;
}
.border_img img {
width: 190px;
height:auto;
}
</style>
<script type="text/javascript">
waterfall({
url:"getPics.php",
async:true,
method:"get"
});
function ajax(obj){
var xhr = (function(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if(typeof ActiveXObject != "undefined"){
var version = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'];
for(var i = 0; i < version.length; i++){
try{
return new ActiveXObject(version[i]);
} catch(e){
}
}
} else {
throw("您的浏览器不支持XHR对象!");
}
})()
obj.url = obj.url +"?rand="+ Math.random();
if(obj.method === "get") obj.url += obj.url.indexOf("?") == -1 ? "?"+ obj.data : "&" + obj.data;
if(obj.async === true){
xhr.onreadystatechange =function(){
if(xhr.readyState == 4){
callback();
}
}
}
xhr.open(obj.method,obj.url,obj.async);
if(obj.method === "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencode");
xhr.send(obj.data);
}else{
xhr.send(null);
}
if(obj.async === false){
callback();
}
function callback(){
if(xhr.status == 200){
obj.success(xhr.responseText);
}else{
console.log('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
}
}
}
function waterfall({
url:url,
async:async,
method:method
}){
var page = 1;
var b = true;
getList();
function getList(){
ajax({
method :method,
url:url,
data:"cpage="+ page,
async:async,
success:function(data){
var imgData = JSON.parse(data);
if(!imgData.length){
return;
}
var containerDiv = document.getElementById("container");
for (var i = 0; i < imgData.length; i++) {
var boxDiv = document.createElement("div");
boxDiv.style.height = imgData.height/imgData.width*boxDiv.style.width;
boxDiv.className = "box";
containerDiv.appendChild(boxDiv);
var borderImgDiv = document.createElement("div");
borderImgDiv.className = "border_img";
boxDiv.appendChild(borderImgDiv);
var boxImg = document.createElement("img");
boxImg.src =imgData[i].preview;
borderImgDiv.appendChild(boxImg);
}
onloadImages("container", "box");
b = true;
}
})
}
window.onscroll = function () {
if (dongtaitianjia("container", "box")) {
if(b){
b = false;
page++;
getList();
}
}
}
function dongtaitianjia(parent, box) {
var containerChilder = document.getElementById(parent);
var boxList = containerChilder.getElementsByClassName(box);
var lastBoxOffsetTop = boxList[boxList.length - 1].offsetTop;
var pingmuHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
if (lastBoxOffsetTop < pingmuHeight + scrollHeight) {
return true;
}
else {
return false;
}
}
function onloadImages(parent, box) {
var containerChilder = document.getElementById(parent);
var boxList = containerChilder.getElementsByClassName(box);
var num = Math.floor(document.documentElement.clientWidth / boxList[0].offsetWidth);
containerChilder.style.cssText = "width:" + num * boxList[0].offsetWidth + "px;margin:0 auto;"
var boxHeightArray = [];
for (var i = 0; i < boxList.length; i++) {
if (i < num) {
boxHeightArray.push(boxList[i].offsetHeight);
}
else {
var minArrayHeight = Math.min.apply(null, boxHeightArray);
var minHeightIndex = getMinHeightArray(boxHeightArray, minArrayHeight);
boxList[i].style.position = "absolute";
boxList[i].style.left = boxList[minHeightIndex].offsetLeft + "px";
boxList[i].style.top = minArrayHeight + "px";
console.log(boxList[i].offsetHeight);
boxHeightArray[minHeightIndex] = boxHeightArray[minHeightIndex] + boxList[i].offsetHeight;
}
}
}
function getMinHeightArray(array, minHeight) {
for (var i = 0; i < array.length; i++) {
if (array[i] == minHeight) {
return i;
}
}
}
}
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
PHP
<?php
header('Content-type:text/html; charset="utf-8"');
$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;
?>