hongkhanh / gridify Goto Github PK

A lightweight script for creating a Pinterest-like grid using JQuery, pure javascript or YUI with image loaded

Home Page: http://hongkhanh.github.io/gridify

License: MIT License

JavaScript 100.00%

gridify's Issues

The height of the grid container collapse. Look's like it's always this way.

In every case (also the given example in 'javascript/example') the height of the container collapse. Would be very nice if this could be fixed!

transition

Hi,
It seems transition does not working on firefox.

It does not consider item border

Hi,
Another issue is that it does not consider items border for calculating "top" attribute.

Supported browsers and responsiveness

Hi,

I just came across your plugin, and it looks really suitable for my projects.

Any idea if it's responsive, and what browsers it works on?

Thanks!

Could not place cross button and title over the image

I'm using Handlebars.js template. Gridify only works for

 <div class="grid">
  {{#each img in images}}
   <img {{bind-attr src=img.src_path}}>
  {{/each}}
 </div>

But when I tried to use <span> for cross button, gridify doesn't allow the spans over images.

<div class="grid">
   {{#each img in images}}
   <img {{bind-attr src=img.src_path}}>
   <span style="position:absolute;top:0;left:80%;z-index:1;">x</span>
  {{/each}}
 </div>

Hi,
I hade a problem with the items container height. As long as items use absolute positing, so the container does not extend while items render. so i come with these lines of code to calculate height on window resizing:

var child_max = $item.position().top+$item.outerHeight();
if(child_max>parent_height) parent_height=child_max;

that should placed inside 'rebder' function.
It's complete changes tha i've made to this method:

                render = function()
                {
                    $this.css('position', 'relative');
                    var items = $this.find(options.srcNode),
                        transition = (options.transition || 'all 0.5s ease') + ', height 0, width 0',
                        width = $this.innerWidth(),
                        item_margin = parseInt(options.margin || 0),
                        item_width = parseInt(options.max_width || options.width || 220),
                        column_count = Math.max(Math.floor(width/(item_width + item_margin)),1),
                        left = column_count == 1 ? item_margin/2 : (width % (item_width + item_margin)) / 2,
                        columns = [];
                    var parent_height = "0";
                    if (options.max_width) {
                        column_count = Math.ceil(width/(item_width + item_margin));
                        item_width = (width - column_count * item_margin - item_margin)/column_count;
                        left = item_margin/2;
                    }

                    for (var i = 0; i < column_count; i++) {
                        columns.push(0);
                    }

                    for(var i = 0, length = items.length; i< length; i++)
                    {
                        var $item = $(items[i]), idx = indexOfSmallest(columns);
                        $item.css({
                            width: item_width,
                            position: 'absolute',
                            margin: item_margin/2,
                            top: columns[idx] + item_margin/2,
                            left: (item_width + item_margin) * idx + left,
                            transition: transition
                        });
                        columns[idx] += $item.innerHeight() + item_margin;

                        var child_max = $item.position().top+$item.outerHeight();
                        if(child_max>parent_height) parent_height=child_max;
                    }
                    parent_height += item_margin;
                    $this.css({height: parent_height+'px'});
                };

gridify only lays out after the page changes size

Having this issue - the imgs only get layed out after I either zoom in or zoom out on the page. This doesn't happen on any of the example pages.
This is my code:

    $(document).ready(function(){
        var albumId = "xxxxxxxxxxxxx";
        $.ajax({
            dataType:"json",
            url:'http://graph.facebook.com/' + albumId + '?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371',
            success:function(incomming){
                var photos = incomming.photos.data;
                for (var key in photos){
                    $("#photos").append("<img src='" + photos[key].source + "' class='image'>");
                }
            },
            error:function(err){
                console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
            }
        });
    });
    $(window).load(function() {
        var options = {
            items:3,
            srcNode: 'img',
            margin: '20px',
            width: '250px',
            resizable: true,
            transition: 'all 0.5s ease'
        }
        $('.grid').gridify(options);
    });

My .grid element starts out as an empty div.

hongkhanh / gridify Goto Github PK

gridify's Issues

The height of the grid container collapse. Look's like it's always this way.

transition

It does not consider item border

Supported browsers and responsiveness

Could not place cross button and title over the image

Calculate parent height

gridify only lays out after the page changes size

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent