Wxnavigation – wechat miniprogram waterfall flow layout mode

source

Wechat Applets Development Forum Vertical wechat applets development exchange forum

Making the address

WxMasonry – WeChat small program to achieve the waterfall flow layout of https://github.com/icindy/WxMasonry

Effects (GIF loading in…. Just a moment…).

Let me ask you a question before you see the end

In the circular list of wechat small program, I have tried to realize the same scale scaling of pictures, but the effect is not good, welcome to exchange solutions!!

implementation

Although the implementation is very simple, but I did not think of it at first, but also around a long way to think of it. When you see the following solution, please do not call me a sb, because I really did not remember, too long did not learn the front-end knowledge, many attributes have not seen.

  • Using CSS 3The column - *attribute
    • column-width
    • column-count
    • column-gap

If you are familiar with CSS3, you might immediately remember it, but I didn’t. I came around a long way to remember it

.WxMasonryView{ column-count:2; column-gap: 10px; width: 100%; } .WxMasonry{ width: 95%; background: #fefefe; border: 2px solid #fcfcfc; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); margin: 5px 2px 2px 2px; padding: 1px; padding-bottom: 5px; transition: opacity .4s ease-in-out; display: inline-block; }Copy the code

Column-count: used to split several columns, so you can set several columns directly without worrying about the screen width.

Column-gap: the spacing is not mentioned.

As for the use of several attributes, I suggest the W3C

Sad history

I actually thought of a CSS-only approach when I started working on waterfall flows, but I didn’t see the column- * attribute because I hadn’t learned CSS again in a long time.

  • The reason why we will first consider pure CSS route is very simple, wechat small program does not have DOM operation, if according to the conventional route is unable to achieve. Pure float is unscientific because, if you try it yourself, float does not achieve the gap pin effect of waterfall flow.

  • When a front-end engineer looks at a waterfall stream, he or she will think of a couple of JS libraries or jquery libraries, all of which use the same principle of “absolute positioning” for computational layout.

  • For my detour, I did not hesitate to follow the conventional waterfall implementation mode, but there was no way to realize so many dom level nested calculations, so IT took me a long time to figure it out, and THEN I jumped back to the pure CSS route. Later, I found the column- * attribute, so I wasted a long time.

conclusion

Since wechat applet does not have Dom operation, many attributes of CSS3 can be used to solve some problems.

source

Wechat Applets Development Forum Vertical wechat applets development exchange forum