按日期無限滾動排序

對於我來說，這是相當困難的。按日期無限滾動排序

我有一個主要是爲手機設計的網頁，並能正常工作。問題出在更大的設備上。

因此，我有一個新聞故事數據庫，首先拉動前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

按日期無限滾動排序

回答

相關問題