Masonry

Masonry Anwendung für Typo3 tx_news Listen Ansicht.

Masonry ist eine JavaScript-Rasterlayoutbibliothek. Es funktioniert, indem Elemente basierend auf dem verfügbaren vertikalen Raum in einer optimalen Position platziert werden.

Downloads
masonry.pkgd.js

imagesloaded.pkgd.js

Weitere Informationen
https://masonry.desandro.com/
https://imagesloaded.desandro.com/  
https://github.com/desandro/masonry  

Templates/News/List.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
    data-namespace-typo3-fluid="true">
<f:layout name="General" />
<!--
  =====================
    Templates/News/List.html
-->

<f:section name="content">
  <f:if condition="{news}">
      <f:then>

        <f:if condition="{settings.templateLayout} == 1">
              <div class="slot-grid">
                    <div class="grid">
                        <div class="grid-sizer"></div>
                              <f:for each="{news}" as="newsItem">
                                   <f:render partial="List/blog" arguments="{newsItem: newsItem, settings:settings}"/>
                               </f:for>
                         </div>    
                     <br style="clear:left;"/></div>    
        </f:if>
      
      </f:then>
  </f:if>    
</f:section>

</html>

Partials
 

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
    data-namespace-typo3-fluid="true">

  <div class="grid-item">
            
            <f:if condition="{newsItem.mediaPreviews}">
            
            <f:then>
            <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
              <f:alias map="{mediaElement: newsItem.mediaPreviews.0}">
                <f:if condition="{mediaElement.originalResource.type} == 2">
                  <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.width, then: settings.media.width, else: settings.list.media.image.width)}" height="{f:if(condition: settings.media.height, then: settings.media.height, else: settings.list.media.image.height)}"/>
                </f:if>          
              </f:alias>
            </n:link>  
            </f:then>
          </f:if>
          
          <div class="text-grid-3">
            
            <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                     <h2>{newsItem.title}</h2>
            </n:link>
                   {newsItem.teaser}<br><br>
                   <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                     &#10230;
                   </n:link>
                   
                   <f:if condition="{newsItem.tags}">
              <!-- Tags -->
              <div class="news-list-date">
              <span class="news-list-tags" itemprop="keywords">
                <f:for each="{newsItem.tags}" as="tag">
                  {tag.title}
                </f:for>
              </span>
              </div>
            </f:if>
            
            <div class="news-list-date">
              <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
                <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
              </time>
            </div>
            
          </div>  
                   
            
  </div>

</html>

Aktivieren
 

<script type="text/javascript" src="/fileadmin/scripts/masonry.pkgd.js"></script>
<script type="text/javascript" src="/fileadmin/scripts/imagesloaded.pkgd.js"></script>

<script type="text/javascript">
// init Masonry
var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer',
  
  });
  
// layout Masonry after each image loads
  $grid.imagesLoaded().progress( function() {
  $grid.masonry();
});
</script>

CSS
 

.slot-grid {float: left; width: 100%; margin: 0 0%; text-align: left;}

.grid {
  position: relative;
  width: 100%; margin: 0 0%;
  
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {  
  width: 31.33333333333%;
  margin: 1%;
  padding:0%;  
  float: left;
  display: block;
  overflow: hidden;
}

/* ---- .grid-item partials ---- */
.text-grid-3 {
  float: left; width: 90%;  padding:8% 5% 5% 5%;  text-align: left; background:#eeeeee; 
}
.text-grid-3 h2 {text-transform: none; font-weight: 800; text-transform: uppercase }
.text-grid-3 a {color: #000;}

.news-list-date { float:left; width: 100%;font-size: 0.8vw; line-height:0.8vw; padding: 0 0 1.0em 0; text-align:right;}