按日期无限滚动排序

对于我来说，这是相当困难的。按日期无限滚动排序

我有一个主要是为手机设计的网页，并能正常工作。问题出在更大的设备上。

因此，我有一个新闻故事数据库，首先拉动前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%; 
}

来源

2016-03-04 bertster

我在你的问题上工作。请试试这个。

*, *: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) { 
 
\t 
 
} 
 

 

 
@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"> 
 
\t <div class="sub-row"> 
 
    \t <div class="story">1</div> 
 
     <div class="story">2</div> 
 
     <div class="story">3</div> 
 
    </div> 
 
    <div class="sub-row"> 
 
    \t <div class="story">4</div> 
 
     <div class="story">5</div> 
 
     <div class="story">6</div> 
 
    </div> 
 
    <div class="sub-row"> 
 
    \t <div class="story">7</div> 
 
     <div class="story">8</div> 
 
     <div class="story">9</div> 
 
    </div> 
 
    <div class="sub-row"> 
 
    \t <div class="story">10</div> 
 
     <div class="story">11</div> 
 
     <div class="story">12</div> 
 
    </div> 
 
</div>

来源

2016-03-04 12:52:22 Ankit

按日期无限滚动排序

回答

相关问题