Responsive Medium.com Inspired Gallery & diseño en Vanilla JavaScript
| Autor: | ankurrsinghal |
|---|---|
| Views Total: | 738 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 22, 2018 |
| Licencia: | MIT |
Vista prévia
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
})
