How to implement random layout waterfall flow in ionic3

This article mainly introduces to you the implementation method of random layout waterfall flow in ionic3 practical tutorial. The article introduces it in detail through sample code and pictures. It has certain reference learning value for everyone's study or work. It needs Friends, let’s study together.

Preface

Recently I came into contact with ionic3 due to project needs, and found that it is really a sharp tool! The ionic project provides a rich set of icons The library has also been upgraded in ionic3.

In one of the company's projects, a waterfall flow special effect was required. After searching for a long time, I couldn't find the relevant resources. I had no choice but to do it~

Without further ado, here are the pictures

# #I believe students who have seen the picture will understand what it means. Yes, it’s a waterfall!

But our waterfall today is not an ordinary waterfall. Let us continue to look at:

Automatic typesetting

Our requirement is to create that random and messy feeling, so we need to make a mechanism , to choose the best arrangement method for the pictures to display on the page, that is, to ensure that the ratio of the picture to the adjacent pictures is the most appropriate and then implement the arrangement.

angular4

I believe this effect is not difficult to achieve in ordinary jq plug-ins. Indeed, some jq plug-ins can also be found on the Internet. But our technology stack is angular4~

In ng, our DOM operations are basically placed in instructions. I believe students who have used angularjs1.x are familiar with it~, the same is true in angular4 Same.

Okay, let’s post the code~

Create instructions

We assume you have After you have established the relevant components in your ionic and already have the image data, if you do not have the relevant foundation, I suggest you take a look at the introduction to ionic3 and angular4 first.

This is one of my component html pages. Perhaps sharp-eyed students have discovered our command [imagr-sort]="item", yes, our The instruction requires the angular data of your current image.

Create a directive ts

ionic g directive image-sortExecute the directive that created us.

After creating our custom instructions, this is what it looks like, empty~

Write our logic

1.1 Receive and inject something:

Look at the picture!

Since we have input in the template

([[imagr-sort]="item"]);then of course we should also include it in the directive Receive the input data; as shown by the red arrow in the screenshot, I saved the input data ->sourceArr;

Then if we want to get some attributes of the dom host in angular4, the element You will need to use ElementRef. Renderer2 is something similar to a renderer in angular4. I haven’t understood the specifics yet. You can read more about this piece of information. I mainly use it in this command. Change some structures of Dom.

About our imgLength, I will talk about it later

1.2 Be practical! The picture is loaded asynchronously!

Let’s first think about this question:

Our instructions start executing when angular data is rendered. This is basically understood by everyone.

but! Our pictures are all loaded asynchronously~, so naturally we have to have a picture loading process:

Well, I believe you have already thought of it---- >

image.onload, yes, that’s right~

It’s time to talk about the previous imgLength. This variable is used to record the number of completed pictures and is used to identify whether the current pictures are all It has been loaded and will serve as a basis for our subsequent actions.

image.onerror, I believe you all understand this, this is a function that fails to load the image. What I do inside is to remove the image that failed to load from the original DOM, angular data removal.

Our angular renderer is used herethis.render2();

You can check out the source code for related functions and methods, basically all commonly used ones Dom operations are implemented.

The for loop is because our image data has multiple pieces, so we have to wait for each image to be loaded successfully.

ps:Note that when using this in the onerror and onload functions, you must use a variable reference in imgOnlodlet _self = this;

The picture is loaded and we start our renovation project

1.3 Divide our delicious food into grids

imageStartStort()!

Above picture

Look at the red circle in picture 1. I have divided five horizontal grid standards myself to facilitate the proportion of the picture later. Make comparisons.

1.4 Occupy our picture definition grid

We created an array allImageArr=[]; used to save the data of all images currently processed.

Remember the angular data we obtained before, we divide the image into grids by looping it.

What do we do in our loop?

1. The width and height of the picture, and find the proportion of each picture.

2. Divide the obtained image ratio into intervals with our own defined grid ratio.

3. Calculate the new width of the picture occupying the grid according to the grid we divided. The number of grids occupied is stored and the record is saved to our custom allImageArr, and in the original angular Add the gridding number to the data to record the corresponding grid number.

Executionthis.pictureColumnSort method;

Our pictures have been divided. Next, let’s have a moment of passion~

1.5 Picture arrangement, select the most suitable neighbor according to the grid~

pictureColumnSort()!

Above picture

There is actually nothing to say about this process. It mainly involves looping, checking the number of grids in each picture, sorting the most suitable ones adjacently (execute the next step: goExchange function), and finally making a separate 5 for those that do not match. The grid tactics come out.

The format can be many:

3 2, 1 4, 1 1 3, 1 3 1, 2 3.. . . . .

How come you are happy~

There is nothing to say, just cycle screening, just look at the picture.

1.6 Change from disorder to order, there should be no better choice except exchange

goExchange()! Above picture

Look at the code in 1.5. We execute this function every time after matching a suitable image, because we need to change the position of the matched image!
The repeatI and repeatA received in this function are the indexes of the double loop in 1.5. This index determines the position where we change the picture.

The principle shown in the code is to change the matched picture to the back of our current picture, and fill the original picture behind it to the position of the changed picture. It is a bit convoluted and may be due to my poor typing ability. ,Ha ha.

There is nothing to say about this function, it just changes the position.

1.7 Learn from each other’s strengths and complete the project!

setHeight()! The above picture

loops again (the code should still have a lot of improvements, the loop is used a lot~) ;

At this point, our layout page has been completed, but the size of our pictures is actually irregular, which can’t be looked at directly.
So we smooth out the differences in this function and learn from each other’s strengths. .

In fact, our picture will definitely be stretched a little, so we also take a balanced middle point to perform appropriate stretching.

This function can definitely make some appropriate restrictions to refine the image size adjustment. At this point we have finished writing the entire command logic.

Complete! ioinc serve

As for the middle call process, I want to explain one thing:

setTimeout(() => {
  _self.setHeight(angularImageList, ele);
  });

I only used the entire call when I was helpless on the night shift. If I don’t add the angle and data set in the setHeight function of the entire call, There will be an error in changing the picture position inexplicably. I still misunderstand it. If you can see the whole solution, please share it.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement calls between methods in vue

How vux implements the pull-up refresh function

How to implement image carousel with jQuery

The above is the detailed content of How to implement random layout waterfall flow in ionic3. For more information, please follow other related articles on the PHP Chinese website!