Линейное разделение, идеальная картинная галерея

Question

Кто-нибудь видел эту страницу раньше, от Chromatic.io?

http://www.chromatic.io/FQrLQsb

Их Галерея совершенен. Я хочу добиться того же. Я в значительной степени теперь использую их файл linear-partition.js, который доступен на GitHub.

Johannes Treitz написал сообщение в блоге об этом здесь:

https://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery

У меня есть изображения секционирования отлично. Весы, которые он дает каждому изображению, также идеальны. Я смог проверить значения, используя точно такую ​​же разметку, как и цветные, и те же исходные изображения. Переходя между моим окном и их, я вижу, что значения разделов идентичны.

Результирующая страница показывает, что мои изображения когда-либо были слишком большими, так как последнее изображение в строке опускается до следующей строки и вызывает эффект бабочки дальше по галерее, в результате чего она выглядит ужасно.

Однако, когда я делаю width/height, чтобы рассчитать соотношение сторон изображения, Chromatic.io совершенно ясно делает что-то еще. Изображение 531 x 800 дает соотношение сторон 0,6375. Принимая во внимание, что они рассчитывают отношение сторон к стороне формата, и получают 0,64545454545454546. Я не могу понять, как они приближаются к этому числу. Что они добавляют к своему алгоритму, чтобы получить этот номер?

То же самое относится к их ландшафтным изображениям 800 x 531. Соотношение сторон, которое я получаю, отличается от их, и более того, они получают разные пропорции (+ - 0,002 в любом случае), и все же все их пейзажные изображения одинаковы.

Я извиняюсь за этого довольно длительный код укуса, но это может быть, что я делаю что-то неправильно, поэтому для тех, кто знает, как это работает, вот он:

$(window).load(function() { 

    var p = $('.photo'); 
    $(p).each(function() 
    { 
     var h = $(this).find("img").height(); 
     var w = $(this).find("img").width(); 
     $(this).attr({ 'data-aspect-ratio': w/h }); 
    }); 

    var photos = p.toArray(); 
    var viewport = $('.images').width(); 
    var ideal_height = parseInt($(window).height()/2); 
    var summed_width = photos.reduce(function(sum, img) 
    { 
     return sum += $(img).data('aspect-ratio') * ideal_height; 
    }, 0); 
    var rows = Math.round(summed_width/viewport); 

    var weights = photos.map(function (img) { 
     return parseInt($(img).data('aspect-ratio') * 100); 
    }); 
    var partition = linear_partition(weights, rows); 

    var index = 0; 
    for(var i in partition) 
    { 
     var summed_ratios; 
     row_buffer = []; 

     for(var j = 0; j < partition[i].length; j++) 
     { 
      row_buffer.push(photos[index++]) 
     } 

     summed_ratios = row_buffer.reduce(function (sum, img) 
     { 
      return sum += $(img).data('aspect-ratio'); 
     }, 0); 

     for(var j = 0; j < row_buffer.length; j++) 
     { 
      var img = row_buffer[j]; 
      $(img).width(parseInt(viewport/summed_ratios * $(img).data("aspect-ratio"))); 
      $(img).height(parseInt(viewport/summed_ratios)); 
     } 
    } 

}); 

Answer 1

Я нашел решение. На самом деле это было очень просто. Алгоритм и код были на месте. Получается, что у изображений был край 2px со всех сторон, который код принимал к учетной записи. Это означало, что ширина каждого изображения составляла 4 пикселя и вызывала переполнение. Чтобы обойти эту проблему, я просто сделал следующее:

},0);......] 

    for(var j = 0; j < row_buffer.length; j++) 
    { 
     var img = row_buffer[j]; 
     $(img).width(parseInt(viewport/summed_ratios * $(im 
     g).data("aspect-ratio")) - <get_image_margin>); 

     $(img).height(parseInt(viewport/summed_ratios)); 

    } 

Извлекая Маржу CSS присвоила каждое изображение и его удаление из расчетной ширины, все работало просто отлично :)