Бесконечный свиток, упорядочивающий по дате

Question

Это довольно сложно для меня, чтобы окунуться.

У меня есть веб-страница, которая в первую очередь предназначена для мобильных телефонов и отлично работает на них. Проблема заключается в более крупных устройствах.

Итак, у меня есть база новостей о новостях, которая начинается, вытаскивая первые 20 историй (упорядоченные по последним новинкам).

На мобильном телефоне, который отображает штраф:

Story 1 История 2 История 3 Story 4

и т.д. На большом экране отображаются истории:

Story 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) { 
 
\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>