按日期无限滚动排序
按日期无限滚动排序
提问于 2016-03-04 19:17:21
这对我来说是一个很难理解的问题。
我有一个网页，它主要是为手机设计的，在手机上运行良好。问题出在更大的设备上。
所以我有一个新闻故事的数据库，它从拉取前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
Stack Overflow用户
发布于 2016-03-04 20:52:22
我解决了你的问题。请试一下这个。
*, *: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35794701
复制相关文章
相似问题
腾讯云开发者
