<div id="container"><div class="box"><div class="content"><img src="../imgs/Girls/01.jpg"></div></div>...
</div>

.box { position: relative; float: left; }
.content { padding: 2px; border: 1px solid #ccc; border-radius: 2px; }
.content img { width: 234px; height: auto; }
#container { background: #fff none repeat scroll 0 0;  margin: 0 auto; width: auto; }

function imgLocation() {var cparent = document.getElementById("container");//获取所有类名为box的元素var ccontent = getChildElement(cparent,"box");//第一张图片的宽度var imgWidth = ccontent[0].offsetWidth;//第一列图片数量var numLine = Math.floor(document.documentElement.clientWidth/imgWidth);//设置父容器的宽度cparent.style.cssText = "width:"+ imgWidth * numLine + "px";//获取每一张图片的高度var  boxHeightArr = [];for(var i=0;i<ccontent.length;i++){if(i<numLine){//把第一行元素的高度添加到数组中去boxHeightArr[i] = ccontent[i].offsetHeight;}else {//获取第一行图片高度最低的图片,然后把第二行第一种图片放在其下面，以此类推var minHeight = Math.min.apply(null,boxHeightArr);//获取最低高度图片的Indexvar minIndex = getMinHeightIndex(boxHeightArr,minHeight);ccontent[i].style.position = "absolute";ccontent[i].style.top = minHeight+"px";ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";//重新计算高度boxHeightArr[minIndex] += ccontent[i].offsetHeight;}}
}
function getMinHeightIndex(boxHeightArr, minHeight) {for(var i in boxHeightArr){if(boxHeightArr[i] === minHeight){return i;}}
}
function getChildElement(parent,className) {var contentArr = [];var allcontent = parent.getElementsByTagName("*");for(var i=0;i<allcontent.length;i++){if(allcontent[i].className === className){contentArr.push(allcontent[i]);}}return contentArr;
}

function isScrollBottom(){var cparent = document.getElementById("container");var ccontent = getChildElement(cparent,"box");//最后一张图片出现一半时的页面高度var lastContentHeight = ccontent[ccontent.length - 1].offsetTop + Math.floor(ccontent[ccontent.length - 1].offsetHeight/2);// 当前页面的高度var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;// 鼠标滚动的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//是否允许滚动return (lastContentHeight < (pageHeight + scrollTop))?true:false;
}

window.onscroll = function () {//最后一张图片出现一半时加载if(isScrollBottom()){//加载图片var cparent = document.getElementById("container");for(var i=0;i<dataImg.data.length;i++){var box = document.createElement("div");box.className = "box";cparent.appendChild(box);var content = document.createElement("div");content.className = "content";box.appendChild(content);var img = document.createElement("img");img.src = dataImg.data[i].src;content.appendChild(img);}//重新设置图片位置
        imgLocation();}
}

function initializeImgs() {var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = handleResponse;xmlhttp.open("GET",url4girls,true);xmlhttp.send();
}
function handleResponse(e){//当 onreadystatechange 事件被触发后，浏览器会把一个 Event 对象传递给指定的处理函数，target 属性则会被设为与此事件关联的XMLHttpRequestif(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){ //请求成功
        addImgBox(e.target.responseText);}
}
function addImgBox(data) {//解析返回的XML文件var imgArr = loadXMLString(data).getElementsByTagName("string");var cparent = document.getElementById("container");for(var i=0;i<imgArr.length;i++){var box = document.createElement("div");box.className = "box";cparent.appendChild(box);var content = document.createElement("div");content.className = "content";box.appendChild(content);var img = document.createElement("img");img.src = imgArr[i].innerHTML;content.appendChild(img);}imgLocation();
}

index_by_javascript.html
index_by_javascript.js
index_by_javascript_ajax.html
index_by_javascript_ajax.js
yctools.js
waterfall.css