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

Automatic typesetting

angular4

Okay, let’s post the code~

Create instructions

Create a directive ts

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

Write our logic

1.1 Receive and inject something:

([[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;

1.2 Be practical! The picture is loaded asynchronously!

image.onload, yes, that’s right~

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!