Responsive Medium.com Inspired Gallery & diseño en Vanilla JavaScript

Tiempo de ejecución: 30 minutos. Empezar

Autor: ankurrsinghal
Views Total: 738
Sitio oficial: Ir a la web
Actualizado: March 22, 2018
Licencia: MIT

Vista prévia

Responsive Medium.com Inspired Gallery & diseño en Vanilla JavaScript

Descripción

Esta es una galería con capacidad de respuesta, fácil de usar, navegable & diseño inspirado en Medium.com. Construido encima de HTML, CSS/CSS3 y JavaScript Vanilla.

Funcionamiento

Cargue la hoja de estilos necesaria ' style. css ' y JavaScript ' Main. js ' en el archivo HTML.

<link rel="stylesheet" href="/css/style.css">
<script src="js/main.js"></script>

Cree el código HTML para la galería de medios.

<section class="section for-you grid-section">

<header class="section-header">


<div class="section-header--title">



<h4>For you</h4>


</div>


<div class="section-header--action"> <a href="#" id="slide-left"> <img src="/img/for-you/back.png" alt="Back"> </a> <a href="#" id="slide-right"> <img src="/img/for-you/next.png" alt="Next"> </a> </div>

</header>

<div class="separator"> <span></span> </div>

<div class="grid-wrapper">


<div class="grid" id="grid">



<div class="grid-column">




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/1.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/2.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>



</div>



<div class="grid-column">




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/3.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/4.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>



</div>



<div class="grid-column">




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/3.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/4.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>



</div>



<div class="grid-column">




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/5.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/6.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>



</div>



<div class="grid-column">




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/7.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>




<div class="grid--item">





<div class="grid--item-image"> <span data-image-url="/img/for-you/8.jpg"></span> </div>





<div class="grid--item-content">






<div class="grid--item-content-top">







<div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>







<div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.








Mollitia perferendis ab laboriosam facilis unde praesentium








molestiae error accusamus ea, ullam sint sunt necessitatibus








repellat odio, dicta enim minima saepe possimus? </div>






</div>






<div class="grid--item-content-bottom">







<div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">








<div class="details">









<div class="name">Arfat Salman</div>









<div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>








</div>







</div>







<div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>








<div class="share-options">









<ul>










<li> <a href="#">Facebook</a> </li>










<li> <a href="#">Twitter</a> </li>









</ul>








</div>







</div>






</div>





</div>




</div>



</div>


</div>

</div>
</section>

Inicializa la Galería mediana con los ajustes.

new Section(document.querySelector('.for-you'), {



// how many items per column


columnPerPage: 2,



// how many items per column on small screen


smallColumnPerPage: 1,



// max body length


maxBodyLength: 250,



// right margin in pixels


marginRight: 20,



// right margin on small screen


marginSmallRight: 0



})

Te puede interesar: