按日期无限滚动排序

Posted 2023-03-05

【中文标题】按日期无限滚动排序

【英文标题】：Infinite scroll ordering by date

【发布时间】：2016-06-18 02:36:23

【问题描述】：

这对我来说很难理解。

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

所以我有一个新闻故事数据库，从提取前 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%; 

【参考方案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>