瀑布流--与图片的预加载

所谓瀑布流，就是图片分几列有规律的排列，但是这里的排列是有要求的，普通的浮动布局会使图片与图片之间有很多的空隙，这个是非常烦人的啊，所以我们就可以使用定位布局。

一最简单版的

大致原理就是用几个容器包住我么你的图片，容器之间的距离设置好，的宽度或者高度有一个和容器一样，这样就实现了一个坐标轴的规范化了
另一个方向要求我们始终向当前内容最短的那个里面插入，这时候我们既要不断的计算那个是最短的
可以使用 offsetWidth 和offsetHeight 来计算宽和高
这里需要特殊说明，图片的尺寸是浏览器渲染之后才有的所以就要借用 img.onload 这个事件在图片加载之后获取我们想要的宽度和高度
如果有图片预加载处理这里可以直接获取
获取到的数值怎么处理呢，怎么能一直的记住呢，就要用到数组了，数组的下标对应所在的列数最开始让数组里面的值都是零，每次向容器里面插入之后就可以让数组对应下标的值增大，用循环找到数组里面的最小的值，就是我们想要向里面插入东西的那个容器了，这样对应起来非常的方便；
缺点：局限性太大了，不能响应式层级太多插入的尾端不是对齐的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
#box{padding: 20px;width: 1200px;border: 1px solid black;margin: 50px auto;display: flex;justify-content: space-around;align-items: start;}
.item{width: 200px;background-color: gray;font-size: 50px;margin-bottom: 10px;text-align: center;color: white;}
ul{width: 200px;list-style: none;margin: 0;padding: 0;border: 1px solid red;}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script>
var box = document.getElementById('box');
var uls = document.getElementsByTagName('ul');
for(var i=0;i<20;i++){
var item = document.createElement('div');
item.className= 'item';
item.innerHTML = i+1;
var height = parseInt(Math.random()*300+100);
item.style.height = height+'px';
item.style.lineHeight = height+'px';
if(i<5){
uls[i].appendChild(item);
}else{
uls[min()].appendChild(item);
}
}
// 找最小高度的函数
function min(){
var num = 0;
for(var i =0;i<uls.length;i++){
if(uls[num].clientHeight>uls[i].clientHeight){
num = i;
}
}
return num;
}
</script>
</html>

二动态插入（不能响应式）

大致原理：动态创建一个 img 元素 var img = new image（）；
设置 img的路径然后向盛放img的容器插入图片

这里不使用容器来限制图片这是根据当前窗口能放下几列图片来计算
我们可以设置一个变量用来设置图片与图片之间的距离
然后把每张图片的宽度理解为事件宽度加上这个距离就会使所有的图片在一个方向上有相同的距离了
这里我们依旧要用一个数组来保存那一列的总高度是最小的，但是这里面这个数组的长度，就决定了有几列
比如向下排布的瀑布流，定位的left 就是上面所说的总宽度（宽度加上距离）乘以数组的下表就可以了
定位的top：值开始应该用一个循环都设置为零然后一直累加当前插入元素的高度，在下一次插入之前要比较那一列的总高度是最小的，就像其里面插入

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流定位板</title>
<style>
body{margin: 0;padding: 0;}
#warp{position: relative;}
#warp div{width: 200px;font-size: 50px;color: white;background-color: #368;text-align: center;transition: all .5s;position: absolute;}
</style>
</head>
<body>
<div id="warp"></div>
</body>
<script>
var warp = document.getElementById('warp');
var width = 200;
var padding = 10 ;
//随机函数
function randomFn(min,max){
return parseInt(Math.random()(max-min))+min;
}
createDiv();
function createDiv(){
// 激素奥有几列
var windowBody = document.documentElement.clientWidth;
var num = parseInt(windowBody / 200);
var topArr =[];
for(var i =0;i<num;i++){
topArr[i] = 0;
}
for(var i=0;i<20;i++){ //控制插入的个数
var div = document.createElement('div');
var height = randomFn(150,400);
div.innerHTML = i;
div.style.height = height + 'px';
var number = 0; //用来存放最小高度的变量
var minTop = topArr[0];
for(var j=0;j<num;j++){
if(minTop>topArr[j]){
minTop = topArr[j];
number = j;
}
}
div.style.top = topArr[number] + 'px';
div.style.left = number(width + padding) + 'px';
topArr[number] += height + padding;
warp.appendChild(div);
}
}
</script>
</html>

三响应式

插入的原理和上面的第二种方法一样，就是利用一个时间 window.onresize 窗口的尺寸发生改变的时候重新的布局
就可以的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流定位布局响应式</title>
<style>
body{
margin: 0;
padding: 0;
}
#warp{
position: relative;
}
#warp div{
width: 200px;
font-size: 50px;
color: white;
background-color: #368;
text-align: center;
transition: all .5s;
position: absolute;
/* padding: 10px; /
}
</style>
</head>
<body>
<div id="warp"></div>
</body>
<script>
var warp = document.getElementById('warp');
var width = 200;//div宽度
var padding = 10 ; //div间距
var all = 40; // 插入div的个数
//随机函数
function randomFn(min,max){
return parseInt(Math.random()(max-min))+min;
}
createDiv();
function createDiv(){
// 激素奥有几列
var windowBody = document.documentElement.clientWidth;
var num = parseInt(windowBody / 200);
var topArr =[];
for(var i =0;i<num;i++){
topArr[i] = 0;
}
for(var i=0;i<all;i++){ //控制插入的个数
var div = document.createElement('div');
var height = randomFn(150,400);
div.innerHTML = i;
div.style.height = height + 'px';
var number = 0; //用来存放最小高度的变量
var minTop = topArr[0];
for(var j=0;j<num;j++){
if(minTop>topArr[j]){
minTop = topArr[j];
number = j;
}
}
div.style.top = topArr[number] + 'px';
div.style.left = number(width + padding) + 'px';
topArr[number] += height + padding;
warp.appendChild(div);
}
}
// 页面串口发生变化时触发
window.onresize = function(){
var divs = warp.children;
var windowBody = document.documentElement.clientWidth;
var num = parseInt(windowBody / 200);
var topArr =[];
for(var i =0;i<num;i++){
topArr[i] = 0;
}
for(var i=0;i<all;i++){
var number = 0; //用来存放最小高度的变量
var minTop = topArr[0];
for(var j=0;j<num;j++){
if(minTop>topArr[j]){
minTop = topArr[j];
number = j;
}
}
divs[i].style.top = topArr[number] + 'px';
divs[i].style.left = number(width + padding) + 'px';
topArr[number] += divs[i].offsetHeight + padding;
}
}
</script>
</html>

图片的预加载

图片相对于我们的代码渲染来说是很大的，尤其是网速不好的时候，卡的不行啊。这时候我们就可以让所有的图片在程序的执行之前加载好，这样程序的执行就非常的流畅了，用户的体验那就更棒了。

具体的原理呢，就是床建一个数组，把所有我们需要的图片动态的插入到数组里面，又去JavaScript使用的是垃圾回收机制，这就导致了一旦堆区的内存在栈区没有了指向就会被回收，加载的就白扯了
什么算是加载呢，就是图片制定了一个src 图片就开始加载了什么时候加载好了呢就可以用 img.onload 来监听
怎么想数组里面插入呢，最简单的就是利用咱们的for循环了加载多少个图片就执行多少次，很方便的

这样我们在使用上面加载好的src的时候就是瞬间的展示出来了，不会有延迟和卡顿的现象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 830px;
border: 1px solid black;
position: relative;
}
.box div{
width: 200px;
position: absolute;
background-color: #333;
color: white;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.getElementsByClassName('box')[0];
var heightArr = [0,0,0,0];
for(var i=0;i<20;i++){
var div = document.createElement('div');
div.style.height = parseInt(Math.random()*100+50) + 'px';
div.innerHTML = i;
var minIndex = 0;
for(var j=1;j<heightArr.length;j++){
if(heightArr[minIndex]>heightArr[j]){
// heightArr[minIndex] = heightArr[j];
minIndex = j;
}
}
div.style.left = minIndex * (210) + 'px';
div.style.top = heightArr[minIndex] + 'px';
box.appendChild(div);
heightArr[minIndex] += (div.offsetHeight + 10);
}
</script>
</html>

最后编辑于：2017.12.11 07:48:00

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,736评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,167评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,442评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,902评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,302评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,573评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,847评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,562评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,260评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,531评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,021评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,367评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,016评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,068评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,827评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,610评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,514评论 2赞 269

瀑布流--与图片的预加载

一最简单版的

二 动态插入（不能响应式）

三响应式

图片的预加载

推荐阅读更多精彩内容

二动态插入（不能响应式）