<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="shortcut icon" href="favicon.ico">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.item {
border: 1px solid #ccc;
padding: 10px;
float: left;
position: absolute;
transition: all 2s;
/*margin-top: -1px;*/
}
.item img {
display: block;
width: 192px;
}
.banner{
width:100%;
height: 100px;
margin-bottom:10px;
}
.banner a{
position: relative;
display: block;
width:100%;
height: 100%;
background: url(../images/banner_3cf14cc.jpg) bottom;
/*background: #b3b8d0;*/
}
.banner a img{
position: absolute;
left:50%;
margin-left:-100px;
margin-top:6px;
}
#box{
margin-left:8px;
}
</style>
</head>
<body>
<div class="banner">
<a href="award.html"><img src="../images/200" alt=""></a>
</div>
<div id="box">
<div class="item"><img src="../images/cos1.jpeg" alt=""></div>
<div class="item"><img src="../images/cos2.jpeg" alt=""></div>
<div class="item"><img src="../images/cos3.jpeg" alt=""></div>
<div class="item"><img src="../images/cos4.jpeg" alt=""></div>
<div class="item"><img src="../images/cos5.jpeg" alt=""></div>
<div class="item"><img src="../images/cos6.jpeg" alt=""></div>
<div class="item"><img src="../images/cos7.jpeg" alt=""></div>
<div class="item"><img src="../images/cos8.jpeg" alt=""></div>
<div class="item"><img src="../images/cos9.jpeg" alt=""></div>
<div class="item"><img src="../images/cos10.jpeg" alt=""></div>
<div class="item"><img src="../images/cos11.jpeg" alt=""></div>
<div class="item"><img src="../images/cos12.jpeg" alt=""></div>
<div class="item"><img src="../images/cos13.jpeg" alt=""></div>
<div class="item"><img src="../images/cos14.jpeg" alt=""></div>
<div class="item"><img src="../images/cos15.jpeg" alt=""></div>
<div class="item"><img src="../images/cos16.jpeg" alt=""></div>
<div class="item"><img src="../images/cos17.jpeg" alt=""></div>
<div class="item"><img src="../images/cos18.jpeg" alt=""></div>
<div class="item"><img src="../images/cos19.jpeg" alt=""></div>
<div class="item"><img src="../images/cos20.jpeg" alt=""></div>
<div class="item"><img src="../images/cos21.jpeg" alt=""></div>
<div class="item"><img src="../images/cos22.jpeg" alt=""></div>
<div class="item"><img src="../images/cos23.jpeg" alt=""></div>
<div class="item"><img src="../images/cos24.jpeg" alt=""></div>
<div class="item"><img src="../images/cos25.jpeg" alt=""></div>
</div>
<script>
window.onload = function () {
var box = document.getElementById("box");
var items = box.children;
var gap = 10;
waterFall();
window.onresize = function () {
waterFall();
}
window.onscroll = function () {
if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {
console.log("需要加载图片了");
var datas = [
"../images/cos1.jpeg",
"../images/cos2.jpeg",
"../images/cos3.jpeg",
"../images/cos4.jpeg",
"../images/cos5.jpeg",
"../images/cos6.jpeg",
"../images/cos7.jpeg",
"../images/cos8.jpeg",
"../images/cos9.jpeg",
"../images/cos10.jpeg",
"../images/cos11.jpeg",
"../images/cos12.jpeg",
"../images/cos13.jpeg",
"../images/cos14.jpeg",
"../images/cos15.jpeg",
"../images/cos16.jpeg",
"../images/cos17.jpeg",
"../images/cos18.jpeg",
"../images/cos19.jpeg",
"../images/cos20.jpeg",
"../images/cos21.jpeg",
"../images/cos22.jpeg",
"../images/cos23.jpeg",
"../images/cos24.jpeg",
"../images/cos25.jpeg",
];
for (var i = 0; i < datas.length; i++) {
var div = document.createElement("div");
div.className = "item";
div.innerHTML = '<img src="' + datas[i] + '" alt="">';
box.appendChild(div);
}
waterFall();
}
};
function waterFall() {
var pageWidth = getClient().width;
var liWidth = items[0].offsetWidth;
var columns = parseInt((pageWidth + 10) / (liWidth + 10));
console.log(columns);
var arr = [];
for (var i = 0; i < items.length; i++) {
if (i < columns) {
items[i].style.top = 0;
items[i].style.left = (liWidth + gap) * i + "px";
arr.push(items[i].offsetHeight);
console.log(arr);
} else {
var min = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (min > arr[j]) {
min = arr[j];
index = j;
}
}
console.log(index + " " + min);
items[i].style.top = arr[index] + "px";
items[i].style.left = (liWidth + gap) * index + "px";
arr[index] = arr[index] + items[i].offsetHeight;
}
}
}
}
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop;
}
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
}
}
</script>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="shortcut icon" href="favicon.ico">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.item {
border: 1px solid #ccc;
padding: 10px;
float: left;
position: absolute;
transition: all 2s;
/*margin-top: -1px;*/
}
.item img {
display: block;
width: 192px;
}
.banner{
width:100%;
height: 100px;
margin-bottom:10px;
}
.banner a{
position: relative;
display: block;
width:100%;
height: 100%;
background: url(../images/banner_3cf14cc.jpg) bottom;
/*background: #b3b8d0;*/
}
.banner a img{
position: absolute;
left:50%;
margin-left:-100px;
margin-top:6px;
}
#box{
margin-left:8px;
}
</style>
</head>
<body>
<div class="banner">
<a href="award.html"><img src="../images/200" alt=""></a>
</div>
<div id="box">
<div class="item"><img src="../images/cos1.jpeg" alt=""></div>
<div class="item"><img src="../images/cos2.jpeg" alt=""></div>
<div class="item"><img src="../images/cos3.jpeg" alt=""></div>
<div class="item"><img src="../images/cos4.jpeg" alt=""></div>
<div class="item"><img src="../images/cos5.jpeg" alt=""></div>
<div class="item"><img src="../images/cos6.jpeg" alt=""></div>
<div class="item"><img src="../images/cos7.jpeg" alt=""></div>
<div class="item"><img src="../images/cos8.jpeg" alt=""></div>
<div class="item"><img src="../images/cos9.jpeg" alt=""></div>
<div class="item"><img src="../images/cos10.jpeg" alt=""></div>
<div class="item"><img src="../images/cos11.jpeg" alt=""></div>
<div class="item"><img src="../images/cos12.jpeg" alt=""></div>
<div class="item"><img src="../images/cos13.jpeg" alt=""></div>
<div class="item"><img src="../images/cos14.jpeg" alt=""></div>
<div class="item"><img src="../images/cos15.jpeg" alt=""></div>
<div class="item"><img src="../images/cos16.jpeg" alt=""></div>
<div class="item"><img src="../images/cos17.jpeg" alt=""></div>
<div class="item"><img src="../images/cos18.jpeg" alt=""></div>
<div class="item"><img src="../images/cos19.jpeg" alt=""></div>
<div class="item"><img src="../images/cos20.jpeg" alt=""></div>
<div class="item"><img src="../images/cos21.jpeg" alt=""></div>
<div class="item"><img src="../images/cos22.jpeg" alt=""></div>
<div class="item"><img src="../images/cos23.jpeg" alt=""></div>
<div class="item"><img src="../images/cos24.jpeg" alt=""></div>
<div class="item"><img src="../images/cos25.jpeg" alt=""></div>
</div>
<script>
window.onload = function () {
var box = document.getElementById("box");
var items = box.children;
var gap = 10;
waterFall();
window.onresize = function () {
waterFall();
}
window.onscroll = function () {
if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {
console.log("需要加载图片了");
var datas = [
"../images/cos1.jpeg",
"../images/cos2.jpeg",
"../images/cos3.jpeg",
"../images/cos4.jpeg",
"../images/cos5.jpeg",
"../images/cos6.jpeg",
"../images/cos7.jpeg",
"../images/cos8.jpeg",
"../images/cos9.jpeg",
"../images/cos10.jpeg",
"../images/cos11.jpeg",
"../images/cos12.jpeg",
"../images/cos13.jpeg",
"../images/cos14.jpeg",
"../images/cos15.jpeg",
"../images/cos16.jpeg",
"../images/cos17.jpeg",
"../images/cos18.jpeg",
"../images/cos19.jpeg",
"../images/cos20.jpeg",
"../images/cos21.jpeg",
"../images/cos22.jpeg",
"../images/cos23.jpeg",
"../images/cos24.jpeg",
"../images/cos25.jpeg",
];
for (var i = 0; i < datas.length; i++) {
var div = document.createElement("div");
div.className = "item";
div.innerHTML = '<img src="' + datas[i] + '" alt="">';
box.appendChild(div);
}
waterFall();
}
};
function waterFall() {
var pageWidth = getClient().width;
var liWidth = items[0].offsetWidth;
var columns = parseInt((pageWidth + 10) / (liWidth + 10));
console.log(columns);
var arr = [];
for (var i = 0; i < items.length; i++) {
if (i < columns) {
items[i].style.top = 0;
items[i].style.left = (liWidth + gap) * i + "px";
arr.push(items[i].offsetHeight);
console.log(arr);
} else {
var min = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (min > arr[j]) {
min = arr[j];
index = j;
}
}
console.log(index + " " + min);
items[i].style.top = arr[index] + "px";
items[i].style.left = (liWidth + gap) * index + "px";
arr[index] = arr[index] + items[i].offsetHeight;
}
}
}
}
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop;
}
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
}
}
</script>
</body>
</html>