HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="img.css" type="text/css">
<script src="img.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="img_box">
<img src="img/3.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
CSS代码（img.css）
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
margin: 5px auto;
}
.box{
padding: 5px;
float: left;
}
.img_box{
padding: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 5px #ccc;
border-radius: 5px;
}
.img_box img{
width: 150px;
min-width: 150px;
height: auto;
}
JavaScript代码(img.js)
= function the window.onload () {
imgLocation ( "Container", "Box");
var cparent = document.getElementById ( "Container");
// load simulation image database, default 50
var imgData = getImgData (50);
IF (checkFlag ()) {
addImgData (cparent, imgData);
}
window.onscroll = function () {
var cparent = document.getElementById ( "Container");
// scroll down each load 10
var imgData = getImgData (10 );
IF (checkFlag ()) {
addImgData (cparent, imgData);
}
}
}
var imgLocation = function (parent, Content) {
// get the maximum container
var parentBox = document.getElementById ( "container" );
// Get the current broadband all items
getChildElement childList = var (parentBox, Content);
// get image width
var imgWidth childList = [0] .offsetWidth;
// get page images in each row to accommodate the number
var cols = Math.floor (document.documentElement.offsetWidth / imgWidth);
// Sets the parent container width
parentBox.style.cssText = "width:" cols + + * imgWidth "PX";
// Get the height of all the images
var arrHeight = [];
for (var I = 0; I < childList.length; I ++)
{
IF (I <cols)
{
arrHeight [I] = childList [I] .offsetHeight;
} the else {
// Get the minimum height of the image
var minHeight = Math.min.apply (null, arrHeight );
var minIndex = getMinIndex (arrHeight, minHeight );
childList[i].style.position="absolute";
childList[i].style.top=minHeight+"px";
childList[i].style.left=childList[minIndex].offsetLeft+"px";
//最小高度更新
arrHeight[minIndex]=arrHeight[minIndex]+childList[i].offsetHeight;
}
}
}
//获取子元素
var getChildElement=function (parent,content) {
var childArr=[];
var allEle=parent.getElementsByTagName("*");
for (var i=0;i<allEle.length;i++)
{
if(allEle[i].className==content){
childArr.push(allEle[i]);
}
}
return childArr;
}
//获取最小高度的索引
var getMinIndex=function (arrHeight,minHeight) {
for (var i=0;i<arrHeight.length;i++){
if(arrHeight[i]==minHeight)
{
return i;
}
}
}
var getImgData=function (count) {
var imgData=[];
for(var i=0;i<count;i++){
imgData[i]="img/"+i+".jpg";
if(i>=10){
imgData[i]="img/"+i%10+".jpg";
}
}
return imgData;
}
//判断是否加载图片
var checkFlag=function () {
var parent=document.getElementById("container");
var childList=getChildElement(parent,"box");
var lastHeight=childList[childList.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight;
if(lastHeight<pageHeight+scrollHeight){
return true;
}
}
//添加图片
var addImgData=function (cparent,imgData) {
for(var i=0;i<imgData.length;i++){
var box=document.createElement("div");
box.className="box";
cparent.appendChild(box);
var img_box=document.createElement("div");
img_box.className="img_box";
box.appendChild(img_box);
var img=document.createElement("img");
img.src=imgData[i];
img_box.appendChild(img);
imgLocation("container","box");
}
}