Vue. Js based waterfall component

The Demo address:huayan.site/waterfall

Advantages of waterfall flow layout

Waterfalls flow for the picture show, it is efficient and attractive, user glance swept the fast reading mode can get more information in a short time, and lazy loading patterns in the waterfall flow and avoid the page the user the mouse to click operation of cascade flow is strewn at random have send, the key features of the fixed width and high uncertainty design make matrix which is different from traditional image page layout mode, The clever use of visual hierarchy, the arbitrary flow of sight and relieve visual fatigue, while giving people a feeling of having a unique style, cut to the young people’s personalized psychology. Domestic Pinterest sites have also mushroomed, with more than 40 known websites. There are four kinds of Pinterest sites. One is e-commerce shopping guide, such as Wangwang.com, Mogujie and Meilishuo, Haoxinguo, relying on Taobao platform. Second, interest map sharing, such as beauty, petals, etc.; The third is in the segmentation of vertical fields, such as snack for foodies, for other tribes in the household industry. Fourth, fashion design information platform such as watch tide network and so on.

  • Vertical waterfall flow

The list of images is divided into fixed columns. Each image or container has the same width, and the height and width are scaled equally (so the height of images varies with different scales), as shown below:

  • Lateral waterfall flow:

The images or containers keep the same height, and the sum of the width of the images displayed in each row is equal to the width of the page. The height and width are scaled equally (so the image width is different in different proportions). However, since the width may not be enough to fill the whole row, the method of cutting the images is adopted, as shown below:

How to use

As an attempt to waterfalls flow, there is no packaging, component’s source code in the. / SRC/components/Waterfall vue, the � example just as a demo, concrete can make changes according to usage scenarios on the basis of this.

Props

prop type description
list Array Image list
row Boolean Horizontal or not
column Number � Column represents how many columns (default: 4) if not horizontally arranged.
height Number For horizontal rows, height should be the height of no rows (default: 225px)