Creating a display of divs that flow from left to right in each row, and then stacking the rows from bottom to top using CSS and jQuery

Question

Creating a display of divs that flow from left to right in each row, and then stacking the rows from bottom to top using CSS and jQuery

My current dilemma involves a collection of divs that must be displayed in a specific order, but with a rather intricate layout. Essentially, this is the structure of my HTML:

<div>
    <div class="box">1 (first in list)</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9 (last in list)</div>
</div>

The desired layout for these divs is to arrange them in rows of 4 from left to right, stacked from bottom to top within each row, like so:

9
5 6 7 8
1 2 3 4

I have included a fiddle showcasing the desired result: http://jsfiddle.net/mpcjs/ - However, I am seeking a solution that does not involve reordering the divs in the HTML. Additionally, please note that the number of divs may vary.

Is it feasible to achieve this? I am open to CSS3/jQuery solutions!

javascript jquery html css

Answer 1

Answer №1

You can achieve this through the use of the jQuery Plugin called jQuery Masonry.

To make this change (starting at line 287)

var position = {
  top: minimumY + this.offset.y
};

do the following:

var position = (this.options.fromBottom) ? {
  bottom: minimumY + this.offset.y
} : {
  top: minimumY + this.offset.y
};

Check out the demo on jsFiddle: http://jsfiddle.net/fnexE/

Answer 2

You can achieve this through the use of the jQuery Plugin called jQuery Masonry.

To make this change (starting at line 287)

var position = {
  top: minimumY + this.offset.y
};

do the following:

var position = (this.options.fromBottom) ? {
  bottom: minimumY + this.offset.y
} : {
  top: minimumY + this.offset.y
};

Check out the demo on jsFiddle: http://jsfiddle.net/fnexE/

Answer 3

Answer №2

If you're looking to enhance your CSS skills, consider diving into the world of flexbox. To see it in action, check out this demo on JsFiddle. Please note that I've only tested it in Chrome so far.

.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}

Answer 4

If you're looking to enhance your CSS skills, consider diving into the world of flexbox. To see it in action, check out this demo on JsFiddle. Please note that I've only tested it in Chrome so far.

.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}

Answer 5

Answer №3

This method may not be the perfect solution just yet, but by utilizing CSS3 in chrome and safari, you can implement writing-mode. Take a look at the w3-dev section dedicated to vertical text.

.row { 
  writing-mode: bt-rl; 
}
.box { 
  display: inline-block;
  vertical-align: top;
}

Experience it here on jsfiddle

Answer 6

This method may not be the perfect solution just yet, but by utilizing CSS3 in chrome and safari, you can implement writing-mode. Take a look at the w3-dev section dedicated to vertical text.

.row { 
  writing-mode: bt-rl; 
}
.box { 
  display: inline-block;
  vertical-align: top;
}

Experience it here on jsfiddle

Answer 7

Answer №4

I'm not quite sure how to stack the DIVs from the bottom, but this method will reverse their order:

HTML:

<div>
    <div>
        <div class='box'>1</div>
        <div class='box'>2</div>
        <div class='box'>3</div>
        <div class='box'>4</div>
        <div class='box'>5</div>
        <div class='box'>6</div>
        <div class='box'>7</div>
        <div class='box'>8</div>
        <div class='box'>9</div>
    </div>
</div>

CSS:

.box{
    float:left;
    border:1px solid #000;
    width:22%;
    margin:1%;
}

jQUERY:

$('div > .box').each(function() {
    $(this).prependTo(this.parentNode);
});

Answer 8

I'm not quite sure how to stack the DIVs from the bottom, but this method will reverse their order:

HTML:

<div>
    <div>
        <div class='box'>1</div>
        <div class='box'>2</div>
        <div class='box'>3</div>
        <div class='box'>4</div>
        <div class='box'>5</div>
        <div class='box'>6</div>
        <div class='box'>7</div>
        <div class='box'>8</div>
        <div class='box'>9</div>
    </div>
</div>

CSS:

.box{
    float:left;
    border:1px solid #000;
    width:22%;
    margin:1%;
}

jQUERY:

$('div > .box').each(function() {
    $(this).prependTo(this.parentNode);
});

Answer 9

Answer №5

If you're looking for a simple CSS solution, here's how it can be done:

Start with the basic HTML structure:

<div class="container">HOVER ME!
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
<div class="inner">five</div>
<div class="inner">six</div>
<div class="inner">>seven</div>
</div>

Next, float the inner elements to the right:

.inner {
    float: right;
    width: 100px;
    height: 100px;
    background-color: lightsalmon;
    margin: 5px;
    font-size: 20px;
}

That's all! But wait, there's more - you'll need to add a hover effect:

.container:hover,
.container:hover div {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}

Just a little touch to make it fun, but the effect is quite nice, don't you think?

Give it a try!

Answer 10

If you're looking for a simple CSS solution, here's how it can be done:

Start with the basic HTML structure:

<div class="container">HOVER ME!
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
<div class="inner">five</div>
<div class="inner">six</div>
<div class="inner">>seven</div>
</div>

Next, float the inner elements to the right:

.inner {
    float: right;
    width: 100px;
    height: 100px;
    background-color: lightsalmon;
    margin: 5px;
    font-size: 20px;
}

That's all! But wait, there's more - you'll need to add a hover effect:

.container:hover,
.container:hover div {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}

Just a little touch to make it fun, but the effect is quite nice, don't you think?

Give it a try!

Creating a display of divs that flow from left to right in each row, and then stacking the rows from bottom to top using CSS and jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using React links in combination with dangerouslySetInnerHTML to render content is a powerful and flexible technique

Identify all elements that include the designated text within an SVG element

Nested for loops are utilized in order to extract names from a JSON array

Unraveling the Mysteries of Ajax Debugging

Creating custom generic functions such as IsAny and IsUnknown that are based on a table of type assignability to determine

The custom styling in custom.css is not taking precedence over the styles defined in

Solving Unique Data Types Directly in the Root of GraphQL

Showing attributes of models using Sequelize and Handlebars

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Monitoring the progress of file uploads within itemView

Discover how to access all of the response headers from an HTTP request in Angular

What is the best way to make content stretch to 100% width when there is no content in the sidebar?

Prestashop 1.7 - Enhanced top menu navigation with drop-down subcategories

The order of event handlers in jQuery

Adding a class to radio buttons and checkboxes in Angular when they are checked or selected without needing to trigger a change event

Ways to retrieve base64 encoded information from an image within an HTML document

Is there a way to modify multiple divs' ids or classes in order to update their styling?

What is the process of combining two identical objects in Angular JS?

Navigation bar links refusing to decrease in size

The website was designed to only allow scrolling on desktop devices, not on mobile devices