试写瀑布流

瀑布流

瀑布流是平常网页中经常见到的一种表现形式，接下来写一种比较简单的瀑布流写法

html

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)