按日期无限滚动排序

Question

这对我来说很难理解。

我有一个主要为手机设计的网页，并且在手机上运行良好。问题出在较大的设备上。

所以我有一个新闻故事数据库，从提取前 20 个故事开始（按最新的在前排序）。

在显示良好的手机上：

故事 1 故事 2 故事 3 故事 4

等等。在大屏幕上显示故事：

故事 1 故事 4 故事 7 故事 10

故事 2 故事 5 故事 8 故事 11

故事 3 故事 6 故事 9 故事 12

第一页上的内容很好，但随着页面变长，当无限滚动播放新闻报道时，由于该栏是最新的报道，所有新闻都向下移动。实际上，用户看到的是第一页上的故事。

就像我说的，在移动设备上，它运行良好，因为它只显示一列。只是想知道是否有人有任何聪明的想法？ pinterest 类型设计只有 css：

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em; 

}

.news-item {
display: inline-block;
margin:  0.2rem;
padding:  0.2rem;
width:  100%; 
}

Answer 1

我已经解决了您的问题。请试试这个。

*, *:before, *:after {box-sizing:  border-box;}
.parent{ width:100%; float:left; display:table; background:#232323; padding:10px;}
.parent .sub-row{ display:table-cell;}
.parent .sub-row .story{ width:100%; height:100px; margin:1px; background:#04CBEC; border:1px solid #000;}



@media only screen and (max-width:1024px) {
	
}


@media only screen and (max-width:767px) {
.parent{ width:100%; float:left; display:block;}
.parent .sub-row{ display:inline;}
.parent .sub-row .story{ width:24.5%; float:left;}
}

<div class="parent">
	<div class="sub-row">
    	<div class="story">1</div>
        <div class="story">2</div>
        <div class="story">3</div>
    </div>
    <div class="sub-row">
    	<div class="story">4</div>
        <div class="story">5</div>
        <div class="story">6</div>
    </div>
    <div class="sub-row">
    	<div class="story">7</div>
        <div class="story">8</div>
        <div class="story">9</div>
    </div>
    <div class="sub-row">
    	<div class="story">10</div>
        <div class="story">11</div>
        <div class="story">12</div>
    </div>
</div>