瀑布流
瀑布流是平常网页中经常见到的一种表现形式,接下来写一种比较简单的瀑布流写法
html
![](imgs/3.jpg)
![](imgs/2.jpg)
![](imgs/1.jpg)
![](imgs/4.jpg)
![](imgs/5.jpg)
![](imgs/6.jpg)
![](imgs/7.jpg)
![](imgs/8.jpg)
![](imgs/9.jpg)
![](imgs/10.jpg)
css
js(index.js)
class Waterfall{
constructor(){
// 等同于构造函数部分
this.box = document.querySelectorAll(".box");
this.cont = document.querySelector(".cont");
// 1.解决居中问题
this.init();
}
// 等同于构造函数的原型部分
init(){
// 计算一行最多放几个:向下取整(屏幕宽 / 单个宽)
this.clientW = document.documentElement.clientWidth;
this.maxNum = parseInt(this.clientW / this.box[0].offsetWidth)
this.cont.style.width = this.maxNum * this.box[0].offsetWidth + "px";
}
}
new Waterfall();
ajax.js
function ajaxGet(url,cb,data){
data = data || {};
var str = “”;
for(var i in data){
str += ${i}=${data[i]}&
;
}
var d = new Date();
url = url + “?” + str + “__qft=”+d.getTime();
var xhr = new XMLHttpRequest();
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(xhr.responseText)
}
}
xhr.send();
}
function ajaxPost(url,callback,data){
data = data || {};
var str = “”;
for(var i in data){
str += ${i}=${data[i]}&
;
}
var xhr = new XMLHttpRequest();
xhr.open("POST",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
callback(xhr.responseText);
}
}
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(str);
}
function jsonp(url,callback,data){
var str = “”;
for(var i in data){
str += ${i}=${data[i]}&
;
}
url = url + “?” + str.slice(0,str.length-1);
var script = document.createElement("script");
script.src = url;
document.body.appendChild(script);
window[data[data.columnName]] = function(res){
callback(res);
}
}
data.php
echo ‘[
{“img”:“imgs/1.jpg”},
{“img”:“imgs/2.jpg”},
{“img”:“imgs/3.jpg”},
{“img”:“imgs/4.jpg”},
{“img”:“imgs/5.jpg”},
{“img”:“imgs/6.jpg”},
{“img”:“imgs/7.jpg”},
{“img”:“imgs/8.jpg”},
{“img”:“imgs/9.jpg”},
{“img”:“imgs/10.jpg”},
]’;
##图片可以自己设计,文件构造如图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191026102644170.png)