Databases
StackOverflow2013
Postsdbo
PODynamic Object Layout
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic Object Layout
    primarykey
    data
    text
    <p>I have an array of 50 objects, each width a different width and height. My objective is to create panels to hold this objects and keep them in order, but this panel cannot exceed a width of 300 pixels or a height of 600 pixels, so I have to fit as many objects as I can within this panel and if they don't fit then I need to create a new panel until there are no more items to append. <br> So for example if I have an item with the dimensions of 150x75, then I could only place another object of the same dimensions, and if the next item does not have this dimensions then I create an empty object to take up these empty space. An example can be found at <a href="http://codepen.io/oscarlomas09/pen/yLfFv" rel="nofollow">Codepen.io</a> Now this works as long as the height of each item is 75px, but the problem arises when the height exceeds this. I have been trying to solve this problem for a few days now, but this particular task seems to throw of the entire design. Here is my logic to check if the item fits:</p> <pre><code>layout.prototype.createPanel = function(){ //create a new panel var panel = '&lt;div style="float:left;margin:5px;border:2px solid black;min-width:'+this.WIDTH+'px;min-height:'+this.HEIGHT+'px;"&gt;'; var h = 0; //as long as the panel height does not exceed the constant height while(h &lt; this.HEIGHT){ //this.commands += h+'&lt;br&gt;'; var w = 0; panel += '&lt;div&gt;'; //create a new row //as long as the panel width does not exceed the constant width while(w &lt; this.WIDTH){ var el = this.items[0]; //grab the first item for checking purposes var fits = false; //if the current column is the first one, then just check if the item fits vertically if(w &lt; this.int_width){ //as long as the item's height plus the current height of this panel is less than the static height, then it fits fits = h + el.height &lt;= this.HEIGHT ? true : false; } //else check if it fits horizontal and vertically else{ if(this.fitsHorizontal(w,el.width) &amp;&amp; h + el.height &lt;= this.HEIGHT){ fits = true; } else{ fits = false; } } //if the item fits, remove it from the array and append it to the panel if(fits){ el = this.items.shift(); panel += el.html; w+= el.width; //update the width this.desired_height = el.height; //update the new desired height //if this shifted item was the last one then terminate execution to avoid any infinite loops if(this.items.length == 0){ this.has_items = false; break; } } //else create an empty element to fill up the space needed else{ panel += '&lt;div style="float:left;width:'+(this.WIDTH - w)+'px;height:'+this.desired_height+'px;background-color:#ccc;margin:1px;"&gt;&lt;/div&gt;'; el.height = this.int_height; break; } } panel += '&lt;/div&gt;'; //close the row //if this shifted item was the last one then terminate execution to avoid any infinite loops if(!this.has_items){ this.has_items = false; break; } h+=this.desired_height; } panel += '&lt;/div&gt;'; //close the panel return panel; } layout.prototype.fitsHorizontal = function(current_width,item_width){ //if the current width plus the item width is less than the constant width them the item fits horizontal if(current_width + item_width &lt;= this.WIDTH){ return true; } return false; } layout.prototype.fitsVertical = function(current_height,item_height){ if(current_height + item_height &lt;= this.HEIGHT &amp;&amp; item_height == this.desired_height){ return true; } return false; } </code></pre> <p>Is there anything wrong with the logic? I now I could solve it if I reorder the items, but they have to stay in order. The full code can be found ad <a href="http://codepen.io/oscarlomas09/pen/yLfFv" rel="nofollow">Codepen.io</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USlomas09
    1. USlomas09
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODynamic Object Layout
      1. USlomas09
      1. VTBountyStart
    2. VO
      singulars
      1. PODynamic Object Layout
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODynamic Object Layout
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COYou should look at the source code of Masonry http://masonry.desandro.com/
      singulars
      1. PODynamic Object Layout
      1. USjuandopazo
    2. CO@stevekohls - your edit is not necessarily warranted - you ASSUME that the problem is language specific, but the way the question is written it is actually a generic architectural design issue, rather than one specific to the language being used to implement it.
      singulars
      1. PODynamic Object Layout
      1. USChris Stratton
    3. COI did this because I have tried the exact logic with php before. I am using javascript in this case because I was testing in codepen.io
      singulars
      1. PODynamic Object Layout
      1. USlomas09
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload