1 votos

Responsive ajustar el grid jquery

Que tal, he estado buscando un sin fin de ejemplos modelo pinterest ya que tengo una web donde se suben imagenes de todo tipo de tamaño y esto malogra la secuencia del diseño, asi que llegue a encontrar este Bootsnip http://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid funciona excelente, pero a la hora que lo veo de un celular crea el responsive, pero se ve una imagen, quiero hacer que se carguen cada 2 para que la imagen no salga muy grande he intentado ver en el código javascript pero no llego a dar en el clavo. Les agradezco la ayuda, si tienen un código similar mas simple aun agradecería que me lo pasen para darle un ojo.

1voto

aEscarcha Puntos 220

Para que te salgan de 2 en 2 con poner un col-xs-6 te debería valer, la parte complicada es que no te meta las imágenes mal por distintas alturas, para eso yo tengo un snippet de JS que hace que los contenedores tengan el mismo height y entonces no se pisen:

( function( $, window, document, undefined )
{
    'use strict';

    var $list       = $( '.gallery-images' ),
        $items      = $list.find( '.gallery-image' ),
        setHeights  = function()
        {
            $items.css( 'height', 'auto' );

            var perRow = Math.floor( $list.width() / $items.width() );
            if( perRow == null || perRow < 2 ) return true;

            for( var i = 0, j = $items.length; i < j; i += perRow )
            {
                var maxHeight   = 0,
                    $row        = $items.slice( i, i + perRow );

                $row.each( function()
                {
                    var itemHeight = parseInt( $( this ).outerHeight() );
                    if ( itemHeight > maxHeight ) maxHeight = itemHeight;
                });
                $row.css( 'height', maxHeight );
            }
        };

    setHeights();
    $( window ).on( 'resize', setHeights );
    $list.find( 'img' ).on( 'load', setHeights );

})( jQuery, window, document );

Vale por fin entendí lo que querías hacer y he modificado el plugin para lo que quieres.

Ahora el plugin tiene una configuración no_columns_small para especificar cuantas columnas quedan cuando entra en modo pequeño, para que esto funcione he modificado la función calculate del plugin, te dejo todo el código aquí por si se pierde el bootsnipp.

$(document).ready(function() {
    $('#pinBoot').pinterest_grid({
    no_columns: 4,
    no_columns_small: 2,
    padding_x: 10,
    padding_y: 10,
    margin_bottom: 50,
    single_column_breakpoint: 700
    });
    });
/*
Ref:
Thanks to:
http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html
*/

/*
    Pinterest Grid Plugin
    Copyright 2014 Mediademons
    @author smm 16/04/2014

    usage:

     $(document).ready(function() {

        $('#blog-landing').pinterest_grid({
            no_columns: 4
            no_columns_small: 2
        });

    });

*/
;(function ($, window, document, undefined) {

    'use strict';

    var $list       = $( '.gallery-images' ),
        $items      = $list.find( '.gallery-image' ),
        setHeights  = function()
        {
            $items.css( 'height', 'auto' );

            var perRow = Math.floor( $list.width() / $items.width() );
            if( perRow == null || perRow < 2 ) return true;

            for( var i = 0, j = $items.length; i < j; i += perRow )
            {
                var maxHeight   = 0,
                    $row        = $items.slice( i, i + perRow );

                $row.each( function()
                {
                    var itemHeight = parseInt( $( this ).outerHeight() );
                    if ( itemHeight > maxHeight ) maxHeight = itemHeight;
                });
                $row.css( 'height', maxHeight );
            }
        };

    setHeights();
    $( window ).on( 'resize', setHeights );
    $list.find( 'img' ).on( 'load', setHeights );

    var pluginName = 'pinterest_grid',
        defaults = {
            padding_x: 10,
            padding_y: 10,
            no_columns: 3,
            no_columns_small: 1,
            margin_bottom: 50,
            single_column_breakpoint: 700
        },
        columns,
        $article,
        article_width;

    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype.init = function () {
        var self = this,
            resize_finish;

        $(window).resize(function() {
            clearTimeout(resize_finish);
            resize_finish = setTimeout( function () {
                self.make_layout_change(self);
            }, 11);
        });

        self.make_layout_change(self);

        setTimeout(function() {
            $(window).resize();
        }, 500);
    };

    Plugin.prototype.calculate = function (single_column_mode) {
        var self = this,
            tallest = 0,
            row = 0,
            $container = $(this.element),
            container_width = $container.width();
            $article = $(this.element).children();

        if(single_column_mode === true) {
            article_width = ($container.width() - self.options.padding_x * self.options.no_columns_small) / self.options.no_columns_small;
        } else {
            article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
        }

        $article.each(function() {
            $(this).css('width', article_width);
        });

        columns = self.options.no_columns;
        if(single_column_mode === true && self.options.no_columns_small > 1){
            columns = self.options.no_columns_small;
        }

        $article.each(function(index) {
            var current_column,
                left_out = 0,
                top = 0,
                $this = $(this),
                prevAll = $this.prevAll(),
                tallest = 0;

            if(single_column_mode === false || self.options.no_columns_small > 0) {
                current_column = (index % columns);
            } 

            for(var t = 0; t < columns; t++) {
                $this.removeClass('c'+t);
            }

            if(index % columns === 0) {
                row++;
            }

            $this.addClass('c' + current_column);
            $this.addClass('r' + row);

            prevAll.each(function(index) {
                if($(this).hasClass('c' + current_column)) {
                    top += $(this).outerHeight() + self.options.padding_y;
                }
            });

            if(single_column_mode === true && self.options.no_columns_small == 0) {
                left_out = 0;
            } else {
                left_out = (index % columns) * (article_width + self.options.padding_x);
            }

            $this.css({
                'left': left_out,
                'top' : top
            });
        });

        this.tallest($container);
        $(window).resize();
    };

    Plugin.prototype.tallest = function (_container) {
        var column_heights = [],
            largest = 0;

        for(var z = 0; z < columns; z++) {
            var temp_height = 0;
            _container.find('.c'+z).each(function() {
                temp_height += $(this).outerHeight();
            });
            column_heights[z] = temp_height;
        }

        largest = Math.max.apply(Math, column_heights);
        _container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
    };

    Plugin.prototype.make_layout_change = function (_self) {
        if($(window).width() < _self.options.single_column_breakpoint) {
            _self.calculate(true);
        } else {
            _self.calculate(false);
        }
    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin(this, options));
            }
        });
    }

})(jQuery, window, document);

0 votos

Pasame tu snippet porfa que no entiendo muy bien :/

1 votos

¿No te sale el código que he puesto? Ese es el snippet que pone la misma altura a todos xD

0 votos

no es que yo no quiero que me cambie la altura :( solo quiero que en el responsive me genere 2 columnas, me gusta el diseño al estilo pinterest

1 votos

Y no te funciona poniendo ??

0 votos

Si, la he colocado le he puesto distintos valores para ver si funciona y nada acá te dejo mi snippet con tu código agregado: http://bootsnipp.com/user/snippets/GXl3R

1 votos

Te he modificado el JavaScript, actualizo la respuesta con lo que he hecho :)

0 votos

Buenisimo Escarcha te pasaste muchas graciaaas :D

0 votos

Acabo de darle un ojo y al parecer los otros artículos se ocultan al lado derecho en vez de bajarse :/

0voto

Miguel Sirna Puntos 495

Disculpa las molestias, pero me sale así oculta los otros articles :( enter image description here

1 votos

Uy se me olvidó el salto de row además del ancho de cada artículo xD he actualizado el código de mi respuesta prueba con ese

1 votos

http://bootsnipp.com/snippets/jb4xz

0 votos

Buenisimo ahora si esta perfecto :D eres la leche!!

0voto

Mikhail Tatsky Puntos 0

Try also this one grid library http://fancygrid.com

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: