For this project I can't use existing masonry libraries and have to implement such a layout from scratch. The layout also has to respect the order of the elements which have fixed heights. Basically, I need to position vertical bars (representing a calendar event displayed on a vertical timeline, where top is an early hour and bottom is a late hour and a bar is somewhere in between) in the most compact way possible.

How do I approach this?
I don't think it should matter, but if it does, I will be implementing it in Angular.

CodePudding user response：

If you are required to implement a masonry layout from scratch and the elements have fixed heights, one approach could be to use a greedy algorithm. This algorithm would iterate through the elements and place each one in the first available spot in the layout, starting from the top-left corner and moving to the right and then down.

You would first need to initialize an empty 2D grid that represents the layout. For each element, starting from the top-left corner of the grid, check if the current grid cell is empty. If it is, place the element in that cell and mark the cells below and to the right of it as occupied. If the cell is occupied, move to the next cell to the right, and repeat the process until you find an empty cell. Once you have placed the element, move to the next one and repeat the process.

You will have to consider the order of the element as well, and make sure that elements are placed in the order they appear in the input array.

It's also possible to optimize this algorithm with a priority queue to improve the time complexity.

As you are using Angular, you can use Angular's change detection mechanism to re-render the layout whenever there is a change in the state of the elements.

It's important to mention that this is a simple approach, and it may not be the most efficient in terms of time or space complexity, but it can be a good starting point to implement the layout that you need.

CodePudding user response：

Yes, the fact that the items have fixed but different heights does change the approach you need to take. Since the items have different heights, you can't simply sort them based on their position in the array, as that would not take their heights into account.

One approach you could take is to sort the items based on their heights, so that the tallest items are placed first. This would help to minimize the amount of empty space in the layout. However, this would also mean that you'll have to sort the elements first before passing them to the layout function.

Another approach you could take is to use a dynamic programming algorithm such as the Longest Increasing Subsequence algorithm. This algorithm can help you to find the optimal placement of elements in the grid, taking into account their heights and the order in which they appear in the array.

Ultimately, the approach you choose will depend on the specific requirements of your project and the trade-offs you're willing to make between compactness and order of the elements.