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

Corrupting the structure of XML data

Scrolling Container Following Down the Page, Halts at Its Own Bottom (Similar to Twitter)

Adding a <tr> tag to an HTML table using JQuery and AJAX in the context of Django framework step by step

How to make a routerLink clickable within an anchor tag in Angular 6

Tips for positioning two fields side by side on a webpage with CSS

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Tips for fetching data from a database using AJAX when the values of two drop-down lists are involved

Combining Python Bottle with Polymer Paper Elements

The issue of "400 Bad Request Error" in Wordpress's admin-ajax.php file is

What is the best way to combine and merge JSON objects that consist of multiple sub-objects?

How can I remove the unsightly scrollbar caused by overflow: auto?

AJAX call not being executed by the script

Encountering the "TypeError: document.getElementById(...) is null" error message while utilizing react.js in conjunction with chart.js

"Discover a simple method to calculate the combined value of checkboxes and seamlessly transfer it to the next page

What is the best way to increase the value of a variable using jQuery?

The Spring Boot application is having trouble retrieving static files

CSS animations - transitioning opacity in and out

Unable to insert a JSON object into an Array

Function that contains a JavaScript reference and observation

Which library do you typically employ for converting .mov files to mp4 format within a React application using Typescript?