My articles in article-section won't all start from the top, and instead are dragged down to the bottom. Why don't they generate from the top?

Question

/*In my html page, my placeholder articles are all being dragged down by one very tall article, something that I infer is because they are being generated incorrectly, so that they are set equal at the bottom. This is opposed to how I want the articles to be generated, set equal at the top. I would like each article-column to generate articles under it from the top of article-section without interference from the other article column classes. What is causing this issue, and how can I fix it?

I have tried changing the displays, Jquery, and CSS code, but the three-column layout is either disturbed, or they still generate from the bottom.*/

HTML

<section id="article-section" class="row js--article-row">
    <div class="article-column js--column-one"></div>
    <div class="article-column js--column-two"></div>
    <div class="article-column js--column-three"></div>
</section>

CSS

#article-section {
    margin-top: 80px;
    background-color: #fff;
}

.article-column {
    position: relative;
    display: inline-block;
}

.article {
    margin: 0 10px 30px 10px;
    box-shadow: 0 5px 5px #d9d9d9;
    border-radius: 0 0 5px 5px;
}

jQuery

var transform = {'<>':'div','class':'article','html':[
{'<>':'a','html':[
{'<>':'img','src':'${img-src}','alt':'${alt}'}],'href':'${article-href}'},
{'<>':'a','html':[
{'<>':'h2','class':'article-title','text':'${title}'}],'href':'${article-href}'},
{'<>':'a','html':[
{'<>':'p','class':'author-text','text':'${author}'}],'href':'${author-href}'},
{'<>':'p','class':'description','text':'${description}'}
]};

var data = [
{'img-src':'https://image.shutterstock.com/image-photo/winter-background-snow-frost-free-600w-1355585222.jpg','alt':'placeholder','href':'#','title':'Placeholder','article-href':'#','author':'David Liu','author-href':'#','description':'This is a placeholder.'},
{'img-src':'http://www.tallheights.com/wp-content/uploads/2016/06/background_purple.jpg','alt':'placeholder','href':'#','title':'Placeholder','article-href':'#','author':'David Liu','author-href':'#','description':'This is a placeholder.'},
{'img-src':'https://designshack.net/wp-content/uploads/placeholder-image.png','alt':'placeholder','href':'#','title':'Placeholder','article-href':'#','author':'David Liu','author-href':'#','description':'This is a placeholder.'},
{'img-src':'https://designshack.net/wp-content/uploads/placeholder-image.png','alt':'placeholder','href':'#','title':'Placeholder','article-href':'#','author':'David Liu','author-href':'#','description':'This is a placeholder.'}
];

var column_num = 0;

$(document).ready(function() {
    $(function() {
        for (i=0; i<=data.length; i++) {
            column_num++;
            if(column_num===1) {
                $('.js--column-one').json2html(data[i],transform);
            } else if(column_num===2) {
                $('.js--column-two').json2html(data[i],transform);
            } else if(column_num===3) {
                $('.js--column-three').json2html(data[i],transform);
                column_num = 0;
            }
        }
    });
});

The articles all end at the bottom of the page instead of generating at the top of article-section.

My articles in article-section won't all start from the top, and instead are dragged down to the bottom. Why don't they generate from the top?

0 Answers0