动态瀑布流布局的图片墙

- 日理万妓 2022-05-29 08:42 198阅读 0赞

要实现动态瀑布流布局的图片墙：要做到两点：  
一.实现瀑布流的图片墙，  
二.使用函数节流监听window的resize事件  
首先：实现瀑布流的图片墙，网上有各种各样式的实现，但是纯css的实现，总是有些bug，不容易控制，所以我使用js进行控制。  
它的原理是：首先使用浮动布局，图片可浮动。具体结构：  
![这里写图片描述][Image 1]  
![这里写图片描述][Image 1]  
这时除了第一行，其他的图片的都有较大的间距。剩下的工作需要js来完成：  
①声明变量保存图片墙容器的dom object，声明变量保存图片墙每个图片容器的dom object，声明变量保存第一行图片容器的属性  
②计算每行图片的数目，第一行每个图片容器的左边的距离，以及第一行每张图片容器的高度（因为除第一行外都是使用的绝对定位）  
③开始计算剩余图片容器的位置，(主要包括图片容器的left和top,每设置一个图片容器的位置，那么就更新第一行图片容器数组的top值，因为判断下张图片容器的位置就是找上一行高度最小的图片容器，在它的下方放置);  
*\*\**注意：  
因为是动态的，所以当窗口变动时，第一行的图片容器数量会改变，所以原来不在第一行之列的元素会进入到第一行，但是此时它们依然是绝对定位，所以要清除绝对定位。  
另外一点，如果你的html的font-size使用函数节流，此时瀑布流布局的图片墙也要用，要注意this的指向，我因为使用了面向对象，所以瀑布流布局的图片墙使用节流时要指向我的对象。\*\*  
\*\*  
完整代码：

<template>
        <ul class="photos-wall clear" ref="photosWall">
            <li class="photo" ref="photo" v-for="img in images" :key="img.index"><img :src="img.src" alt="瀑布流图片" /></li>
        </ul>
    </template>
    
    <script type="text/javascript"> import Base from '../assets/js/base.js' export default { data() { return { images: [], waterfullBoxObj: null, waterfullElemObjs: null } }, created() { this.init(); }, mounted() { this.initGetDomObj(); }, methods: { init: function () { // 一切数据和函数的入口 this.initBaseDatas(); }, initBaseDatas: function () { //初始化data中的所有数据 this.initImagesData() }, initImagesData: function () { //初始化data中images属性的初始值 let images = [ { 'index': 1, 'src': '../../static/imgs/waterfull/hy1.jpeg'}, { 'index': 2, 'src': '../../static/imgs/waterfull/hy2.jpg'}, { 'index': 3, 'src': '../../static/imgs/waterfull/hy3.jpg'}, { 'index': 4, 'src': '../../static/imgs/waterfull/hy4.jpg'}, { 'index': 5, 'src': '../../static/imgs/waterfull/hy5.jpg'}, { 'index': 6, 'src': '../../static/imgs/waterfull/hy6.jpg'}, { 'index': 7, 'src': '../../static/imgs/waterfull/hy7.jpg'}, { 'index': 8, 'src': '../../static/imgs/waterfull/hy8.jpg'}, { 'index': 9, 'src': '../../static/imgs/waterfull/hy9.jpg'}, { 'index': 10, 'src': '../../static/imgs/waterfull/hy10.jpg'} ]; this.images = images; }, initGetDomObj: function () { //初始化获取的dom元素的对象 let self = this; // 延迟获取dom元素，因为图片未加载完毕，获取的元素的高度不正确 let timer = setTimeout(function () { self.waterfullBoxObj = self.$refs.photosWall; //获取瀑布流容器对象 self.waterfullElemObjs = self.$refs.photo; //获取瀑布流容器中元素对象 let waterfullPhotos = ProxySingletonWaterfullPhotos(self.waterfullBoxObj, self.waterfullElemObjs); window.addEventListener('resize', Base.throttle(waterfullPhotos.init, 200, waterfullPhotos), false); }, 200); } } } let isDOM = (typeof HTMLElement === 'object')? function(obj){ return obj instanceof HTMLElement; }: function(obj){ return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'; }; /** * 使用代理模式创建WaterfullPhotos类的单例模式 */ var ProxySingletonWaterfullPhotos = (function () { let instanse; return function (box, items) { if (!instanse) { instanse = new WaterfullPhotos(box, items); } return instanse; } }()); /** * 瀑布流布局的图片墙 * @param object box [description] * @param items items [description] */ function WaterfullPhotos (box, items) { // 检测参数 if (!box || !items) { throw new Error('function WaterfullPhotos arguments can not missing!'); return ; } if (!isDOM(box)) { throw new Error('function WaterfullPhotos first param must be a dom object!'); return ; } if (!Array.isArray(items) || (items.length <= 0)) { throw new Error('function WaterfullPhotos second param must be a dom object array!'); return ; } for (let i = 0, len = items.length; i < len; i++) { if (!isDOM(items[i])) { throw new Error('function WaterfullPhotos second param must be a dom object array!'); return ; } } this.box = box; //图片墙的容器 this.items = items; //图片墙的容器中的每张图片的盒子容器 this.firstColum = []; //图片墙的容器的第一行图片组 this.columnNum = 0; //图片墙的容器每行图片的数目 // 启动函数 this.init(); } /** * 获取瀑布流图片第一列的属性 * @return {[type]} [description] */ WaterfullPhotos.prototype.getWaterfullFirstColumn = function () { // 计算每一列的数目(总宽度/每个元素的宽度[元素的宽度相等]) this.columnNum = Math.floor(this.box.offsetWidth / this.items[0].offsetWidth); let waterfullElemObj_w = this.items[0].offsetWidth; this.clearFirstColumnPhotosPosition(); let obj = {}, // 存放第一列元素的属性 _firstColum = []; //保存第一列元素 for (let i = 0; i < this.columnNum; i++) { obj.width = waterfullElemObj_w; obj.left = i * waterfullElemObj_w; obj.top = this.items[i].offsetHeight; _firstColum.push(obj); obj = {}; } this.firstColum = _firstColum; obj = null; _firstColum = null; } /** * 清除第一行图片组中某些元素的绝对定位 * @return {[type]} [description] */ WaterfullPhotos.prototype.clearFirstColumnPhotosPosition = function () { // 当窗口触发resize事件时,可能原来设置绝对为的元素加入到第一行，所以要清除绝对定位 for (let i = 0; i < this.columnNum; i++) { if (this.items[i].style.position === 'absolute') { this.items[i].style.position = ''; this.items[i].style.top = ''; this.items[i].style.left = ''; } } } /** * 设置图片墙除第一行图片其他图片的位置 * @param array arr 除第一行图片盒子的其他图片盒子组成数组 */ WaterfullPhotos.prototype.setWaterfullOtherPhotoPosition = function (arr) { for(let i = 0, item; item = arr[i++];) { let minObj = this.getObjArrayAttributeMinValue(this.firstColum, 'top'); item.style.position = 'absolute'; item.style.top = this.firstColum[minObj.minIndex].top + 'px'; this.firstColum[minObj.minIndex].top += item.offsetHeight; //更新当列据顶部的高度 item.style.left = this.firstColum[minObj.minIndex].left + 'px'; } } /** * 获取对象数组某个属性的最小值 * @param array arr 需要获取最小值和最小值位置的目标对象 * @param array attr 需要获取最小值和最小值位置的目标对象的属性 * @return object 获取的最小值和最小值位置 */ WaterfullPhotos.prototype.getObjArrayAttributeMinValue = function (arr, attr) { let _arr = []; for (let i = 0, item; item = arr[i++];) { if (item.hasOwnProperty(attr)) { _arr.push(item[attr]); } } let minValue = Math.min.apply(null, _arr), minIndex = _arr.indexOf(minValue); return { minValue: minValue, minIndex: minIndex }; } /** * WaterfullPhotos类的启动函数 * @return {[type]} [description] */ WaterfullPhotos.prototype.init = function () { this.getWaterfullFirstColumn(); this.setWaterfullOtherPhotoPosition(this.items.slice(this.firstColum.length)); } </script>
    
    <style lang="scss" scoped> /*photos wall style*/ .photos-wall{ position: relative; width: 100%; min-height: 100%; font-size: inherit; .photo{ display: inline-block; width: 15.625em; min-width: 5.5em; float: left; font-size: inherit; img{ width: 100%; vertical-align: middle; } } } </style>

base.js

[Image 1]: