Amphtml: Feature request: amp-list to support masonry layout

[leonalicious]

Good Day, here is some little background, in order to filter those unnecessary info from user sights & increase the exposure of important information, we are hoping is it possible we can have a Horizontal masonry layout option for amp-list please?

Based on my research, there are 2 ways of getting this layout on the ground:

1. PURELY CSS solution with the use of flex, we can achieve the vertical layout easily compare to horizontal, but in real world, most people will read the contents from LEFT to RIGHT and from TOP to BOTTOM, that's why, Horizontal layout makes more sense here.
   
   [source taken from : [hackernoon](https://hackernoon.com/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190fa4296)]

But with a little trick on it, we can get what we want by writing some ugly code which renders 2 sets of list , and after that, use CSS nth-child to hide the ODD and EVEN based on needs.

OR apply the similar ugly code to re-arrange the sequence of items at our API endpoint.

1. Uses absolute position and some calculation as what AMP version of Pinterest is doing.

In short term, we will go for the 1st approach but moving forward, hope this layout can be supported within amp-list or new component amp-masonry. This masonry layout feature will definitely make a perfect combination with the infinite scroll of what @cathyxz is currently working on, anyway, any thoughts ?

[cathyxz]

@alanorozco once wrote up a doc for a generic amp-masonry approach using Houdini's Layout API, (code example here ) however support for this API isn't ready yet. I think the last discussed status of this feature was that we'd revisit it in a year when there is better support for Houdini's Layout API.

We already support inline styles per https://github.com/ampproject/amphtml/pull/16544, which makes approach 2 that you mentioned above somewhat feasible with infinite scroll.

[leonalicious]

thank you for the feedback, but the thing is inline-style will eventually make the entire css size larger and larger and might bump into css size > 50KB issue.

[nainar]

Hi @leonalicious would doing this with <amp-script> be a possibility?

[leonalicious]

Good Day @nainar, I think so, but not too sure about the performance, but I am sure with handlebar template, it will be a more perfect solution to support this as the key main thing here is to be able to categorised the items into odd and even buckets, what do you think?

[leonalicious]

Today I have tried to implement masonry layout, but too bad, not that smooth as <div role="listitem"> will be created and appended into the root of amp-list and cause children nodes of items are relying to different div wrapper

Understand the logic that <div role="listitem"> will be created only IF

1. during the mustache rendering, there is more than one elements are being rendered, amp-list will create <div role="listitem"> to wrap them, just like our current search List page, wrapped List <a> & Gallery <a> index by index throughout the Loop of mustache.

With this approach, because each items are wrapped Row by Row, no chance i can achieve masonry which is Column by Column design.

1. With the option single-item on, amp-list will append <div role="listitem"> as well, I have tried

js <render 20 div for List> <render 20 div for Gallery-Odd> <render 20 div for Gallery-Even>

because with single-item on, mustache will be able to loop 20 items (per fetch) div based on my needs but upon new request, they will be wrapped with a new <div role="listitem">.

not too sure how can I bypass and make this<div role="listitem"> not to be created, any thoughts ?

[cathyxz]

Hi @leonalicious:
So here's a simplistic demo for the three-list approach @sparhami proposed today: https://amp-infinite-scroll.glitch.me/.
You can play with the source code at: https://glitch.com/edit/#!/amp-infinite-scroll
Click on the "Remix Project" button to get an editable version.

You need to make a few more server-side changes to get varied heights, but I think that approach actually generally works.

UPDATES:
There is a slight issue with using changeToLayoutContainer to switch from grid to list layout because the changeToLayoutContainer happens before layoutCallback of the previously display: none list. There are a few code changes I can do to amp-list to make that work if necessary.

[leonalicious]

hey @cathyxz , tried with your solution, although it looks weird to me, it works fine with the position: absolute & layout: fixed-height.

btw, I found another issue with the implementation, the request seems has gone hotwired even though I have stopped scrolling. Please refer to the gif below, thank you ~

[cathyxz]

Yeah I suspect that's a different and actual issue with load-more. I'm trying to find a cleaner repro to debug.

[leonalicious]

hey hi @cathyxz, are you able to reproduce this issue and fix it ?

[nainar]

Hi @leonalicious is the most recent issue one with infinite scroll or with masonry layout. If infinite scroll can you split this out into a separate issue and we can get someone to work on it?

[andreyMakahov]

Hi, @nainar I will continue working with masonry layout. Let me do my investigation first. After I will let you know what the issues we are facing.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.