兩種方式實現水平瀑布流佈局

時間 2020-09-14

標籤兩種方式實現水平瀑布佈局欄目悠閒生活简体版

原文原文鏈接

在實際開發中，常常會遇到圖片排序處理的問題，進過屢次嘗試，我在這裏總結兩種圖片水平排序的方式：

第一種：CSS屬性直接設置圖片樣式css

具體是使用CSS中的column-count屬性，給圖片的外部box設置後，裏面的img能夠直接根據數量來進行排序html

頁面效果就是如下這樣：緩存

html和css代碼以下：app

可能細心的你會發現，可是這個屬性能夠進行水平對齊，可是排序會出現問題，因此應用場景有限，可是優點也很明顯，就是省事(*^▽^*)。dom

第二種：使用js代碼來動態進行設置佈局

原理是經過一個數學邏輯來對圖片進行計算，假設咱們須要把4張大小不一樣的圖片進行水平瀑布流對齊，咱們須要先計算好全部圖片的高寬比，而後給一個統一的高度，根據這個統一的高度進行排序，咱們能夠得到一個長方形，ui

這個長方形也是有寬高比的，咱們把它計算出來，而後將寬度調整爲頁面寬度，那麼這個時候高度咱們自須要調整寬高比就能夠肯定，根據這個調整好的高度，咱們再根據4張圖片的寬高比，來獲取這個時候的寬度，對圖片進行排序便可。this

案例以下：spa

第一張圖片：400*300，寬高比爲4:3設計

第二張圖片：500*100，寬高比爲5:1

第三張圖片：200*500，寬高比爲2:5

第四張圖片：200*100，寬高比爲2:1

咱們首先肯定一個高度，這裏設定爲300

那麼總的長方形寬度爲2620，

這個長方形的寬高比爲131：15

接下來咱們須要獲取頁面寬度，這裏以1920爲例，

那麼安裝這個比例來調整總長方形，它的高度爲219.84，這裏小數點兩位後的能夠直接捨棄，從頁面顯示來看無關痛癢

那麼安裝這個高度，咱們再反推4張圖片的寬度爲：

第一張圖片：293.12*219.84

第二張圖片：1099.2*219.84

第三張圖片：87.963*219.84

第四張圖片：439.68*219.84

這四張圖片的總寬度爲：1919.963

根據這個邏輯來設置js代碼，對全部的圖片進行分組，在分組中進行這樣的操做，就能夠實現圖片水平瀑布流佈局，代碼設計的好，能夠兼容全部寬度，一切爲所欲爲，但缺點也是有的，就是麻煩，麻煩，麻煩，並且考慮到這套邏輯實現，

對內存的佔用量較大，對懶加載也很不友好，須要改邏輯才能夠兼容欄加載和圖片緩存︿(￣︶￣)︿。

這裏提供一個案例dome給你們進行觀看和調試

http://www.linheng.xyz/project/sppbl/index.html

效果以下（具有簡單的懶加載功能）：

主要代碼以下：

<html>

<head>

<title>水平瀑布流懶加載</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

h1 {

text-align: center;

}

.box {

overflow: auto;

/* width:80%; */

border: 1px black solid;

margin: 0 auto;

}

.box img {

float: left;

display: block;

}

</style>

<body>

<h1>水平瀑布流</h1>

</body>

var box = document.getElementsByClassName("box")[0];

var imglist = [];

var img,

length = 0,

count = 0,

line = 3;

// console.log(box);

var maxwidth = window.innerWidth - 100;

box.style.width = maxwidth + "px";

addimg(20);

function fomate() {

var row = Math.floor(length / line);

// console.log(row);

for (var i = 0; i < row; i++) {

var w = 0; //每行的寬度和

for (var j = 0; j < line; j++) {

if (imglist[i * line + j].prop != undefined) {

w += imglist[i * line + j].prop * 300; //單張圖片以300爲高的寬度累加到w中

}

// console.log(w);

var h = 300 * maxwidth / w;

for (var j = 0; j < line; j++) {

if (imglist[i * line + j].prop != undefined) {

imglist[i * line + j].style.height = h + "px";

imglist[i * line + j].style.width = h * imglist[i * line + j].prop + "px";

}

window.onresize = function () {

maxwidth = window.innerWidth - 100;

box.style.width = maxwidth + "px";

fomate();

}

window.onscroll = function () {

var scroll = document.documentElement.scrollTop;

var screen = window.innerHeight;

var offsetTop = box.offsetTop;

var height = box.offsetHeight;

if (scroll + screen - offsetTop - height > -20) {

addimg(20);

}

;

}

function addimg(i) {

length += i;

// console.log(length);

for (var i = 1; i <= 20; i++) {

img = createimg("img/pics (" + i + ").jpg", box);

imglist.push(img);

// console.log(imglist.length);

}

function createimg(src, pad) {

//建立圖片的方法

var length = 20;

count = 0;

var img = document.createElement("img");

img.src = src;

pad.appendChild(img);

img.onload = function () {

this.prop = this.width / this.height;

count++;

// console.log(count);

if (count == length) {

fomate();

}

return img;

}

</script>

</html>

以上是我總結出的兩種方法，若是有更好的方法，歡迎你在評論進行補充ヾ(◍°∇°◍)ﾉﾞ。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。