前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax 瀑布流</title>
<style>
* {
padding: 0;
margin: 0;
border: none;
}
#main {
position: relative;
margin: 0 auto;
}
.box {
float: left;
margin: 5px 0 0 0;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
}
img {
width: 200px;
vertical-align: top;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic"><img src="1.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="2.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="3.png" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="4.png" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="5.png" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="6.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="7.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="8.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="9.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="10.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="1.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="2.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="3.png" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="4.png" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="5.png" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="6.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="7.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="8.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="9.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="10.jpg" alt=""></div>
</div>
</div>
<script>
window.addEventListener("load", function () {
sort()
})
window.addEventListener("scroll", function (event) {
if (document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight <= 200) {
get()
}
})
function sort() {
let father = document.getElementById("main");
let allBox = father.getElementsByClassName("box");
let boxWidth = allBox[0].offsetWidth;
let screenWidth = window.innerWidth;
let cols = Math.floor(screenWidth / boxWidth);
father.style.width = boxWidth * cols + "px";
let heightArray = [];
let boxHeight = 0;
let mihBoxHeight = 0;
let minIndex = 0;
for (let i = 0; i < allBox.length; i++) {
boxHeight = allBox[i].offsetHeight;
if (i < cols) {
heightArray.push(boxHeight)
} else {
mihBoxHeight = Math.min.apply(null, heightArray);
minIndex = heightArray.indexOf(mihBoxHeight);
allBox[i].style.position = "absolute";
allBox[i].style.top = mihBoxHeight + "px";
allBox[i].style.left = allBox[minIndex].offsetLeft + "px";
heightArray[minIndex] += boxHeight;
}
}
}
function get() {
let xhr = new XMLHttpRequest();
xhr.open("get", "http://localhost:3000/datalist", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = xhr.responseText;
let father = document.getElementById("main");
let box = document.createElement("div");
box.className = "box";
let pic = document.createElement("div");
pic.className = "pic";
let img = document.createElement("img");
img.src = 'data:image/jpg;base64,' + data;
pic.appendChild(img);
box.appendChild(pic);
father.appendChild(box);
}
}
sort()
}
</script>
</body>
</html>
服务端代码
const express = require('express');
const fs = require(`fs`);
const cors = require('cors');
const app = express();
app.use(express.json());
app.use(express.urlencoded({
extended: false}));
app.use(cors());
app.get('/datalist', (req, res) => {
let number = Math.floor(Math.random() * 10) + 1;
let imageData = '';
if (number === 3 || number === 4 || number === 5) {
imageData = fs.readFileSync(`../${
number}.png`);
} else {
imageData = fs.readFileSync(`../${
number}.jpg`);
}
let imageDataToBase64 = imageData.toString('base64')
res.send('' + imageDataToBase64);
});
app.listen(3000, function () {
console.log(`http://localhost:3000`);
})