Dynamic App Connect Masonry

First, add app connect to your page.

We will use a server action, with a database query, which returns data from our database, as a source. Add new component. and under data, select server connect.

Select your server action (1-4).

Now, as we have our data source ready, let's add the masonry.

 Click on your page where you want to insert it (1). Add a new component (2). Under display (3), select masonry (4). 

Click the dynamic data picker to select the expression (1). And under the server connect component, data (2), select your database query (3-4).

Select an unique key (1-4). This would be the identity column of your database table.

Select whether to preserve elements order or not. Preserve order option will position items in a masonry layout but maintain left-to-right order. When you turn this option off masonry will discard horizontal order and will position items in a way that it equalizes the columns heights (1 top). Enable the animation option if you want to have the masonry elements animated when the container size changes (1 middle). Setup the animation duration (1 bottom). Setup, how many columns should masonry use for different screen sizes. The default option will be used for all screen sizes, if you leave the rest of the fields empty. We enter 1 column, for the smallest screens (2_1). We enter the column number for small, medium, large and extra large screen sizes. If any of the fields is left empty, it inherits the previous ones' value (2). In this example, the extra large screen will use the same number of columns as on the large screens - 4 (2_5). Setup the horizontal spacing between elements. You can also set this up for different screen sizes (3). We don't want any spacing between our elements, so we enter 0 in the default field (3_1). 

And we are done setting up masonry options. Let's add our dynamic elements inside it.

The masonry container, is a repeater. It will repeat the element, inserted inside it. This can be any HTML element, like image, div container, anchor, etc. Click inside the masonry container (1). In this example we will use images. Click insert and add a dummy image (2-5).  

For the image we add a dynamic attribute (1). Select images (2), then image source (3).

We bind the binding from our database query, which returns the images paths (1-4). If you are not using an image as a masonry element, just bind the data according to the element used.

Let's preview the results.

You can see, our dynamic images, with different heights, are greatly arranged on the page. That's how easy it is, to setup a dynamic app connect masonry