2

I have a site where there are essentially 4 different sized blocks. They may contain text, images, etc.

On the page load, I want these different sized blocks to fit on the viewport and appear "randomly" filled in. I also don't want space between these blocks.

As an added complexity, these blocks would be sorted by their date. The date sorting would be "loose" since I know these blocks couldn't fill the space neatly while retaining a strict sorting.

Logical Layout

The grey area is the viewport of the browser.

How would I logically go about sorting these blocks on to the page? The blocks towards the top should be loosely sorted by date and should fill the space neatly (even though my drawing is a little rough)

Note** I do want it to appear random. When new blocks are added, they should look "randomized" from the previous view of blocks

Note2** These are being pulled from a database. The divs are loaded into the html unsorted and unsized. I was thinking JavaScript could iterate through the logical part I am asking since I want it to be responsive.

12preschph
  • 311
  • 1
  • 4
  • 11
  • Are the blocks sorted BEFORE they're output, or are you loading everything dynamically, then sorting in the DOM? – Diodeus - James MacFarlane Dec 03 '13 at 18:37
  • @Diodeus they are sorted before and statically placed in the HTML. They are produced dynamically via PHP, each block with a numbered unique ID. Also each block has a static size, just no offset. This is where I thought the logical part would come in. – 12preschph Dec 03 '13 at 18:41

1 Answers1

0

You may be hard pressed to find a way to ensure that there are never any gaps at all.. but you should be able to get close.

My suggestions on this would be to divide your page into a grid. Because your smallest block is 100px by 100px, your grid can consist of 100x100 px squares. You can try keeping this information in variables, or in an array (probably a multidimensional one with rows inside of columns)

Next, I would sort all of my blocks into an array, by date. (ideally, just store an ID or something to reference the block, as well as it's width and height)

Then, I would begin iterating through my grid, checking each square individually. Each time I hit a new empty square, I would cross-check it with the first item in the array of blocks, and figure out how many rows and columns that block needs to span across. If the block is 2 rows wide and 1 column high, I would check if the grid space neighbouring the one I'm looking at is empty.. If so, you can place that block, and store off the info that those two grid spaces are filled, causing the iteration to skip over that next spot once it moves away from the current one. If there were no empty neighbouring space, you can begin iterating through the array of blocks, checking each one until you either find a block that will fit, or you reach the end. if the end is reached and no blocks were selected, the space will remain listed as empty, and the next space will begin being checked.

Obviously, that leaves the potential for grid spaces to be marked empty, and never filled, but it might not always be possible to fill every space.

I hope that helps you along.. obviously as this is a question based on logic, it can be a bit confusing to sort out, or there could be something I overlooked, so let me know if you have any specific questions.

Blake Mann
  • 5,440
  • 23
  • 37
  • This actually helped more than you know. This logic actually makes a lot of sense and is perfect for what I need. That date sorting you suggested is actually pretty loosely-based and works well. Thank you! – 12preschph Dec 04 '13 at 16:12