preface

This article will talk about vuE-CLI and picture waterfall together, mainly I do two aspects of the exercise. In fact, if you just write a single page image waterfall effect does not have to build a vuE-CLI project. Those who need to see the code can check it on my Github.

Vue-cli construction project

1. Check your node version first. Vue-cli requires node8.9 or higher

2. Install vuE-CLI 

npm install -g @vue/cliCopy the code

Note: If you have installed the global vuE-CLI before, you need to uninstall it and then install the new version

npm uninstall vue-cli -g
npm install -g @vue/cli
Copy the code

3. Construction project

Vue create XXX (where XXX is the name of your project)Copy the code

4. Select a configuration mode

Default: Use the default Manually select features: custom configuration

If you select the default configuration, press Enter. If you select custom configuration, some options will pop up successively

5. Customize configuration options



Babel: Supports ES6 syntax conversion

TypeScript: A superset of JS provided by Microsoft

Progressive Web App (PWA) Support: Progressive Web applications.

The Router: routing

Vuex:Vuex is a state management mode + library for vue.js applications

CSS pre-processors :Sass/Less preprocessors

Linter/Formatter: Code style check

Unit Testing: Support for Unit Testing

E2E Testing: Supports E2E Testing

Note: the space is selected/deselected, and then enter










6. After configuration, wait for download

7. Start the project

cdProject-name // Go to the root directory NPM run serve // Run the projectCopy the code

8. Project catalog analysis



Inside the SRC



Picture waterfall flow layout

What is picture waterfall flow? Simply speaking, it is to arrange many pictures of different sizes as neatly as possible. In this paper, the layout is equal width, the column width is fixed, and then fill the picture in the shortest column each time.




Basic idea:

1. Calculate the width of each column based on the window width and the number of columns

2. Find the shortest column

3. Calculate the position according to the column number, picture width and height

4. Add pictures to it

5. Optimize and adapt window widths (listen for window resize events)

Now take a look at the code and I’ll put comments in place:

<template>
  <div class="v-waterfall-content" id="v-waterfall">
    <div v-for="(img,index) in waterfallList"
         :key="index"
         class="v-waterfall-item"
         :style="{top:img.top+'px',left:img.left+'px',width:ImgWidth+'px',height:img.height}">
      <img :src="img.src" alt="">
    </div>
  </div>
</template>

<script>
    export default {
        name: "pic-waterfall".data() {return {
                waterfallList:[],
                imgArr:[
                    require('./assets/images/1 (13).jpeg'),
                    require('./assets/images/1 (12).jpeg'),
                    require('./assets/images/1 (11).jpeg'),
                    require('./assets/images/1 (10).jpeg'),
                    require('./assets/images/1 (9).jpeg'),
                    require('./assets/images/1 (8).jpeg'),
                    require('./assets/images/1 (7).jpeg'),
                    require('./assets/images/1 (6).jpeg'),
                    require('./assets/images/1 (5).jpeg'),
                    require('./assets/images/1 (4).jpeg'),
                    require('./assets/images/1 (3).jpeg'),
                    require('./assets/images/1 (2).jpeg'),
                    require('./assets/images/1 (1).jpeg'),
                    require('./assets/images/1 (1).gif'),
                    require('./assets/images/1.jpg'),
                    require('./assets/images/2.jpg'),
                    require('./assets/images/3.jpg'),
                    require('./assets/images/4.jpg'),
                    require('./assets/images/5.jpg'),
                    require('./assets/images/6.jpg'),
                    require('./assets/images/7.jpg'),
                    require('./assets/images/8.jpg'),
                    require('./assets/images/9.jpg'),
                    require('./assets/images/10.jpg'),
                    require('./assets/images/11.jpg'),
                    require('./assets/images/12.jpg'),
                    require('./assets/images/13.jpg'),
                    require('./assets/images/14.jpg'),
                    require('./assets/images/15.jpg'),
                    require('./assets/images/16.jpg'),
                    require('./assets/images/17.jpg'),
                    require('./assets/images/18.jpg'),
                    require('./assets/images/19.jpg'),
                    require('./assets/images/20.jpg'),
                ],
                ImgWidth:' ',
                ImgCol:5,
                ImgRight:10,
                ImgBottom:10,
                deviationHeight:[],
                imgList:[],
                screenWidth:document.body.clientWidth,
            }
        },
        created() {
            for (leti = 0; i < this.imgArr.length; i++){ this.imgList.push(this.imgArr[i]); }},mounted(){ this.calculationWidth(); const that = this; Onresize = () => {// Mount the resize event window.onresize = () => {return(() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() } }, ScreenWidth (val){// In order to avoid frequent triggering of resize, use a timerif(! This.timer){// If the value of screenWidth is changed, it will be reassigned to the data screenWidth this.screenWidth = val this.timer =true
                    let that = this
                    setTimeout(function(){ that.calculationWidth(); // Recalculate the image width that.timer =false},400)},}, methods:{// Calculate the width of each imagecalculationWidth(){ this.ImgWidth = (this.screenWidth-this.ImgRight*this.ImgCol)/this.ImgCol; This.deviationheight = new Array(this.imgcol); // Initialize the offset height Array this.deviationheight = new Array(this.imgcol);for (leti = 0; i < this.deviationHeight.length; i++){ this.deviationHeight[i] = 0; } this.imgpreloading ()}, // image preloadingimgPreloading(){
                this.waterfallList=[];
                for (leti = 0; i < this.imgList.length; i++){let aImg = new Image();
                    aImg.src = this.imgList[i];
                    aImg.onload = aImg.onerror = ()=>{
                        letimgData = {}; imgData.height = this.ImgWidth/aImg.width*aImg.height; Imgdata.src = this.imgList[I]; // Imgdata.src = this.imgList[I]; this.waterfallList.push(imgData); this.rankImg(imgData); // Render page}}}, // Waterfall flow layout rankImg(imgData){let {ImgWidth,ImgRight,ImgBottom,deviationHeight} = this;
                let minIndex = this.filterMin(a); ImgData. Top = deviationHeight[minIndex]; Imgdata. left = minIndex*(ImgRight+ImgWidth); DeviationHeight [minIndex] += imgdata. height + ImgBottom; // Update the height of the current column}, // find the shortest column and return the subscriptfilterMin(){
                const min = Math.min.apply(null, this.deviationHeight);
                return this.deviationHeight.indexOf(min);
            },
        }
    }
</script>Copy the code

The CSS code:

.v-waterfall-content{
    width: 100%;
    height: 100%;
    position: relative;
}
.v-waterfall-item{
    position: absolute;
}
.v-waterfall-item img{
    width: 100%;
    height: 100%;
}Copy the code

This completes the layout of the waterfall. Take a look at the renderings



To see the full project code, please go to Github