瀑布流--與圖片的預(yù)加載

所謂瀑布流，就是圖片分幾列有規(guī)律的排列，但是這里的排列是有要求的，普通的浮動(dòng)布局會(huì)使圖片與圖片之間有很多的空隙，這個(gè)是非常煩人的啊，所以我們就可以使用定位布局。

一最簡(jiǎn)單版的

大致原理就是用幾個(gè)容器包住我么你的圖片，容器之間的距離設(shè)置好，的寬度或者高度有一個(gè)和容器一樣，這樣就實(shí)現(xiàn)了一個(gè)坐標(biāo)軸的規(guī)范化了
另一個(gè)方向要求我們始終向當(dāng)前內(nèi)容最短的那個(gè)里面插入，這時(shí)候我們既要不斷的計(jì)算那個(gè)是最短的
可以使用 offsetWidth 和offsetHeight 來(lái)計(jì)算寬和高
這里需要特殊說明，圖片的尺寸是瀏覽器渲染之后才有的所以就要借用 img.onload 這個(gè)事件 在圖片加載之后獲取我們想要的寬度和高度
如果有圖片預(yù)加載處理這里可以直接獲取
獲取到的數(shù)值怎么處理呢，怎么能一直的記住呢，就要用到數(shù)組了，數(shù)組的下標(biāo)對(duì)應(yīng)所在的列數(shù) 最開始讓數(shù)組里面的值都是零，每次向容器里面插入之后就可以讓數(shù)組對(duì)應(yīng)下標(biāo)的值增大，用循環(huán)找到數(shù)組里面的最小的值，就是我們想要向里面插入東西的那個(gè)容器了，這樣對(duì)應(yīng)起來(lái)非常的方便；
缺點(diǎn)：局限性太大了，不能響應(yīng)式 層級(jí)太多 插入的尾端不是對(duì)齊的

<!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);
}
}
// 找最小高度的函數(shù)
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>

二 動(dòng)態(tài)插入（不能響應(yīng)式）

大致原理 ： 動(dòng)態(tài)創(chuàng)建一個(gè) img 元素 var img = new image（）；
設(shè)置 img的路徑 然后 向盛放img的容器插入圖片

這里不使用容器來(lái)限制圖片 這是 根據(jù)當(dāng)前窗口能放下幾列圖片來(lái) 計(jì)算
我們可以設(shè)置一個(gè)變量 用來(lái)設(shè)置 圖片與圖片之間的距離
然后把每張圖片的寬度 理解為 事件寬度加上 這個(gè)距離 就會(huì)使所有的圖片在一個(gè)方向上有相同的距離了
這里我們依舊要用一個(gè)數(shù)組來(lái)保存那一列的總高度是最小的，但是這里面這個(gè)數(shù)組的長(zhǎng)度，就決定了有幾列
比如向下排布的瀑布流，定位的left 就是 上面所說的總寬度（寬度加上距離）乘以數(shù)組的下表就可以了
定位的top：值開始應(yīng)該用一個(gè)循環(huán)都設(shè)置為零 然后一直累加當(dāng)前插入元素的高度，在下一次插入之前要比較那一列的總高度是最小的，就像其里面插入

<!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 ;
//隨機(jī)函數(shù)
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++){ //控制插入的個(gè)數(shù)
var div = document.createElement('div');
var height = randomFn(150,400);
div.innerHTML = i;
div.style.height = height + 'px';
var number = 0; //用來(lái) 存放最小高度的變量
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>

三響應(yīng)式

插入的原理和上面的第二種方法一樣，就是利用一個(gè)時(shí)間 window.onresize 窗口的尺寸發(fā)生改變的時(shí)候重新的布局
就可以的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流定位布局響應(yīng)式</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的個(gè)數(shù)
//隨機(jī)函數(shù)
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++){ //控制插入的個(gè)數(shù)
var div = document.createElement('div');
var height = randomFn(150,400);
div.innerHTML = i;
div.style.height = height + 'px';
var number = 0; //用來(lái) 存放最小高度的變量
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);
}
}
// 頁(yè)面串口發(fā)生變化時(shí)觸發(fā)
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; //用來(lái) 存放最小高度的變量
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>

圖片的預(yù)加載

圖片相對(duì)于我們的代碼渲染來(lái)說是很大的，尤其是網(wǎng)速不好的時(shí)候，卡的不行啊。這時(shí)候我們就可以讓所有的圖片在程序的執(zhí)行之前加載好，這樣程序的執(zhí)行就非常的流暢了，用戶的體驗(yàn)?zāi)蔷透袅恕?/p>

具體的原理呢，就是床建一個(gè)數(shù)組，把所有我們需要的圖片動(dòng)態(tài)的插入到數(shù)組里面，又去JavaScript使用的是垃圾回收機(jī)制，這就導(dǎo)致了一旦堆區(qū)的內(nèi)存在棧區(qū)沒有了指向就會(huì)被回收，加載的就白扯了
什么算是加載呢，就是圖片制定了一個(gè)src 圖片就開始加載了 什么時(shí)候加載好了呢 就可以用 img.onload 來(lái)監(jiān)聽
怎么想數(shù)組里面插入呢，最簡(jiǎn)單的就是利用咱們的for循環(huán)了 加載多少個(gè)圖片就執(zhí)行多少次 ，很方便的

這樣我們?cè)谑褂蒙厦婕虞d好的src的時(shí)候就是瞬間的展示出來(lái)了，不會(huì)有延遲和卡頓的現(xiàn)象

<!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>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
    lilyping閱讀 1,899評(píng)論 0贊 1
  • 單例模式 適用場(chǎng)景：可能會(huì)在場(chǎng)景中使用到對(duì)象，但只有一個(gè)實(shí)例，加載時(shí)并不主動(dòng)創(chuàng)建，需要時(shí)才創(chuàng)建 最常見的單例模式，...
    Obeing閱讀 2,104評(píng)論 1贊 10
  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品，去做同樣的事情，實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 7,842評(píng)論 2贊 17
  • 不支持上傳文件，所以就復(fù)制過來(lái)了。作者信息什么的都沒刪。對(duì)前端基本屬于一竅不通，所以沒有任何修改，反正用著沒問題就...
    全棧在路上閱讀 1,998評(píng)論 0贊 2
  • ~ 1、 裸條事件出來(lái)，各大媒體都在怒批這些女生“腦殘”“不顧廉恥”“吸毒了”，各種意見領(lǐng)袖們都在勸女生要自愛，新...
    劍圣喵大師閱讀 58,873評(píng)論 670贊 1,417