jQuery или PHP галерея бесшовных изображений

Question

Я ищу способ отображения галереи изображений различной ширины и высоты, чтобы между ними не было пробелов.

Нечто подобное решение, но совместим с IE и предпочли бы горизонтальные строки, а не вертикальные столбцы: http://css-tricks.com/seamless-responsive-photo-grid/

проваливать плагин или аналогичный, есть ли какие-либо данные о том, как добиться этого? У меня было немного с ним немного PHP и выяснено, как пропорционально масштабировать изображения до заданной максимальной высоты строки и отслеживать, сколько осталось места, однако это не помогает, когда вы получаете изображения короче, чем max (вы все равно получите немного пробелов).

Одна из идей заключалась в том, чтобы просто отображать изображения, а затем использовать jQuery для их масштабирования (используя атрибуты width/height), так как я мог бы снимать y изображений и выработать, как поместить их в строку x пикселей в ширину.

Недолговечность на локтевой смазке, просто нужно подтолкнуть в правильном направлении. Любая помощь оценивается

Answer 1

Я пытался получить то, что вы хотите на некоторое время теперь. Я посмотрел на бесшовную сетку с сеткой Криса Койера, и я столкнулся с некоторыми проблемами, когда я представил фильтрацию.

Вы можете видеть мои вопросы/ответы на stackoverflow относительно css-column бесшовных фотосети here и here.

Затем, я попытался использовать javascript, используя jQuery Masnory в жидкой среде. Вы можете прочитать, как это сделать в сообщении this stackoverflow.

Это работает, но я все еще пытаюсь понять, почему между изображениями возникают вертикальные промежутки.

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

Answer 2

Хорошо, так что сначала вы должны мысленно выделить место в сетке. Таким образом, ваш «холст» - это х единиц, а y - высокий. Теперь назначьте изображения в структуру, содержащую начальную точку x, y, а также количество единиц, которые являются широкими и высокими.

Теперь самое интересное - как выполнить Использование PHP Я хотел бы создать массив как

$images = array(array(x1_1, y1_1, length_1, width_1, src_1) 
        array(x1_2, y1_2, length_2, width_2, src_2)) 

Это расскажет вам все о ваших фотографий, которые необходимо знать, чтобы напечатать их на экран.

echo "<div id=\"myDiv\">; 
foreach($images as $i){ 
    echo "<img src=\"{$i[5]}\" height=\"{$i[3]}\" width=\"{$i[4]}\" x1=\"{$i[0]}\ y1=\"{$i[1]}\">"; 
echo "</div>"; 

В этот момент я буду использовать jQuery для изменения элементов высоты и ширины путем умножения атрибутов по шкале.

$(document).ready(function(){ 
    var scale = 30; //30 pixels maybe? 
    //I'm not a jquery ninja, so please assume my syntax is wrong 
    $("#myDiv").children().each(function(){ 
     this.attr("height", this.attr("height")*scale); 
     this.attr("width", this.attr("width")*scale); 
    }); 

}) 

Теперь поместите изображение в нужном месте на основе x1 и y1 свойства

$(document).ready(function(){ 
    var scale = 30; //30 pixels maybe? 
    //I'm not a jquery ninja, so please assume my syntax is wrong 
    $("#myDiv").children().each(function(){ 
     this.css('property', value); 
    }); 

})