css выравнивание для макетного макета

Я попытался masonry.js, чтобы создать сетку для кладки, но проблема с имением заключается в том, что более длинный блок перекрывается с другими единицами, а по какой-то причине masonry.js не заполняет область по отношению к высоте контента вообще.css выравнивание для макетного макета

поэтому я решил, что могу сделать это вручную, используя селектор :nth-child.

Я хочу, чтобы сделать его выглядеть следующим образом:

Вот что я до сих пор, http://lifeto.cafe24.com/xe/request

, и я хочу, чтобы слои не пересекаются друг с другом и заполнить пробел автоматически.

Вот код, я использую:

CSS:

*, *:before, *:after { 
    box-sizing: border-box !important; 
} 

article { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-items: flex-start; 
} 

.board_list { 
    display: block; 
} 

.list_container { 
    height: auto; 
    margin: 0 20px 100px; 
    padding: 0; 
    width: 200px; 
    display: inline-block; 
} 

.list_profile_img_container { 
    /* border-bottom: 1px solid #ccc; */ 
    margin: 0; 
    padding: 0; 
} 

.list_profile_image { 
    border-radius: 100px; 
    width: 30px; 
    height: 30px; 
} 

.list_image_thumbnail { 
    width: 100%; 
    height:100%; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
} 

.list_one { 
    opacity: 0; 
    background: rgba(255,255,255,0.8); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
    border-radius: 3px; 
}

HTML:

<article> 
    <!-- LIST --> 
    <div class="list_container"> 
     <div class="list_one"> 
     </div> 
    </div> 
</article>

может кто-нибудь помочь мне?

P.S. вот сценарий js, который я использую для функциональности.

и обратите внимание, что im использует jscroll.js для создания бесконечного эффекта прокрутки и im загрузки masonry.js в функции обратного вызова плагина.

/* infinite scroll */ 
jQuery(document).ready(function(){ 
jQuery('.board_content').jscroll({ 
    loadingHtml: '<div class="loading_div"><center><img  src="layouts/wb10/ajax-loader4.gif" alt="Loading" /></center></div>', 
    padding: 0, 
    contentSelector: '.board_list', 
    autoTriggerUntil: 30, 
    nextSelector:'.next_button', 
    callback: function() { 

     jQuery('.list_container').masonry({ 
    // options 
    itemSelector: '.list_container', 
    columnWidth: 50 
}); 

     jQuery('.list_one').waypoint(function() { 
     jQuery('.list_one').addClass('animated fadeIn'); 
     }, { 
     offset: '75%' 
    }); 
} 
}); });

источник

2016-02-11 Mark Kang

Можете ли вы опубликовать jsfiddle? будет намного легче обнаружить ошибку –

@ KhaledAl-Ansari благодарит за помощь. я боюсь, что он не будет точно генерировать такую же ошибку, поскольку все содержимое и изображения поступают из CMS, которые им используют. не можете ли вы определить ошибку, просто взглянув на сайт, который я привел? –

Как-то элементы '.list_container' получают' height: 0px'. Вам нужно проверить, кто это делает, и почему высота равна 0. Я думаю, что это потому, что элемент не ': visible', когда скрипт работает, поэтому скрипт находит, что его высота' 0'. (http://i.stack.imgur.com/AO3Wx.png) Попробуйте запустить скрипт только после отображения всех элементов и дайте мне знать результат. –

Я проверил элементы, и я обнаружил, что каждый элемент получил height: 0px; и это проблема, что вам нужно сделать, это задержать вызов библиотеки кладки до каждого элемента отображается на экране, а затем запустить кладку, чтобы получить правый эффект

источник

2016-02-11 09:54:07

можете ли вы проверить исходное сообщение? Я просто добавил js-скрипт. и можете ли вы снова получить доступ к сайту? я просто удалил masonry.js, и вот как это выглядит без masonry.js http://lifeto.cafe24.com/xe/request, можете ли вы дать мне подсказку, как это сделать? –

Что такое использование jscroll? @MarkKang –

это бесконечная функция прокрутки: http://jscroll.com/ –

css выравнивание для макетного макета

ответ

Смежные вопросы