1

/*在我的html页面中，我的占位符文章都被一篇非常高的文章拖下，我推断是因为它们生成不正确，因此它们在底部设置为相等。这与我希望生成文章的方式相反，在顶部设置相等。我希望每个文章列从文章部分的顶部在其下生成文章，而不受其他文章列类的干扰。是什么导致了这个问题，我该如何解决？

我已经尝试更改显示、Jquery 和 CSS 代码，但是三列布局要么被干扰，要么它们仍然从底部生成。*/

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;
            }
        }
    });
});

文章都在页面底部结束，而不是在文章部分的顶部生成。

4

0 回答 0