Take you step by step to use Vue to implement a picture horizontal waterfall flow plug-in

How to useVueto implement a picture horizontal waterfall flow plug-in? Here I would like to share with you some knowledge I have summarized on the Internet, I hope it will be helpful to you.

1. Source of demand

I encountered a requirement today, which needs to be displayed horizontally on the page Loading some pictures using the waterfall flow method suddenly reminded me of an article I wrote a long time ago "Two Ways to Implement Horizontal Waterfall Flow Layout in JS"

But there is one Problem, this requirement is for the Vue project, so there is no way. Here I will share with you my development process. The main body of the project is developed using the CRMEB back-end framework that I have been learning before. The UI uses iView-UI. The rest of the scenarios are the same as Other Vue projects are the same. [Related recommendations:vuejs video tutorial]

2. Logical assumption

If it is not the vue environment, our logic For

1.获取所有的p元素 2.获取盒子的宽度，宽度都是相同，高度不同 3.在浮动布局中每一行的盒子个数不固定，是根据屏幕宽度和盒子宽度决定 4.获取屏幕宽度 5.求出列数，屏幕宽度 / 盒子宽度 取整 6.瀑布流最关键的是第二行的盒子的排布方式，通过获取第一行盒子中最矮的一个的下标，绝对定位，top是最矮盒子的高度，left是最矮盒子的下标 * 盒子的宽度 7.循环遍历所有的盒子，通过列数找到第一行所有的盒子，将第一行盒子的高度放入数组，再取出数组中最小的一个的下标，就是第6步思路的第一行盒子中最矮盒子的下标。 8.循环继续，第二行第一个盒子，通过绝对定位，放进页面。 9.关键，需要将数组中最小的值加上放进的盒子的高度 10.继续循环，遍历所有 11.如果想要加载更多，需要判断最后一个盒子的高度和页面滚动的距离，再将数据通过创建元素，追加进页面，再通过瀑布流布局展示

But if it is a Vue project, we can boil the logic down to the following steps

1.获取屏幕宽度 2..获取盒子的宽度，宽度都是相同，高度不同 3.在浮动布局中每一行的盒子个数不固定，是根据屏幕宽度和盒子宽度决定 4.求出列数，屏幕宽度 / 盒子宽度 取整 5.瀑布流最关键的是第二行的盒子的排布方式，通过获取第一行盒子中最矮的一个的下标，绝对定位，top是最矮盒子的高度，left是最矮盒子的下标 * 盒子的宽度 6.继续循环，遍历所有 7.如果想要加载更多，需要判断最后一个盒子的高度和页面滚动的距离，再将数据通过创建元素，追加进页面，再通过瀑布流布局展示

3. Final effect picture

##4. Code analysis

Let’s take a look at my html part first

Core js part

I would like to remind everyone here that when using the plug-in, we need to usethis.$nextTick() to initialize the page, because the premise of the method's success is to wait for the page Acquisition and calculation can only be performed after the initial loading is completed

The overall plug-in code is:

Copy after login

5. Outer layer usage and lazy loading

When using this plug-in, there are two problems, that is because the inner layer isposition: absolute; positioned, it will not open the outer p, which will cause the outer layer to The box model is not easy to lay out, and the page is lazy to load when it is pulled down. So what should we do?

Here I give my processing method

Copy after login

The core code of the drop-down is:

scrollFun(e) { const offsetHeight= e.target.offsetHeight const scrollHeight= e.target.scrollHeight const scrollTop= e.target.scrollTop if((scrollHeight - (offsetHeight+scrollTop)) < 10){ if(this.bottomMain){ this.bottomMain = false this.addListDataFun() } } }, addListDataFun(){ this.$Spin.show({ render: (h) => { return h('div', [ h('Icon', { 'class': 'demo-spin-icon-load', props: { type: 'ios-loading', size: 18 } }), h('div', '数据更新中...') ]) } }); setTimeout(() => { this.pbList = this.pbList.concat(this.addList) this.bottomMain = true this.$nextTick(()=>{ this.$refs.compList.waterFall("#tabContainer", ".tab-item") this.$Spin.hide() }) },1000) }

The global loading event of iView-UI is used here. If you want to use other UI frameworks, you can also modify it yourself

Here, all the ideas are over

web front-end development,Basic programming video)

The above is the detailed content of Take you step by step to use Vue to implement a picture horizontal waterfall flow plug-in. For more information, please follow other related articles on the PHP Chinese website!