2015-05-14 1 views
0

Вот странная вещь, в которой я размахивал своим мозгом.Создайте компоновку кладки, а затем примените гравитацию к ней.

Я хочу сделать две вещи, в следующем порядке:

  1. Генерировать макет Кладка стиле из списка дивы, ГИМ, или любой другой. Они будут использовать изображения, но они могут быть фоновыми изображениями, в пределах div или каким-либо другим способом, который работает. Это может быть чистый CSS или плагин jquery.

  2. После того, как сетка была сгенерирована, примените плагин с физикой, подобный «.throwable» для отдельных div/объектов. Объекты будут падать друг на друга, но в целом сохраняют свою структуру, как вы видели в Angry Birds или что-то в этом роде.

Цель здесь состоит, чтобы вставить в список дивы, пусть JQuery плагин или даже чистый CSS автоматически выяснить, как выровнять их, а затем применить тяжести кладки сетки.

Проблема, с которой я столкнулся снова и снова, заключается в том, что сетка кладки генерируется ... но затем, когда я применяю к ней физическую систему, отдельные объекты возвращаются в другое положение. Я думаю, что кладка хочет, чтобы они были «относительными», в то время как физическая система хочет, чтобы они были «абсолютными»? Не уверен, что ...

У меня есть грубый вариант моей последней попытки здесь, если кто-то хочет, чтобы получить представление о том, что я пытаюсь: http://cssdeck.com/labs/full/f5dm0zv8

+0

Я думаю, что самое легкое, что вы могли попробовать, это использовать какой-то плагин javascript для генерации сетки. Затем для каждого изображения просто используйте .offset(), чтобы получить позицию и создать для нее физическое тело, разместив физическое тело, используя положение, которое вы получаете от смещения. – Jasper

ответ

0

ответ Джаспера намекнул на решение, хотя я не уверен, почему на этот раз все было похоже на меня. Я попробовал несколько javascript/jquery основанных плагинов масонства, и ничего не сработало. Я закончил тем, что пытался «http://masonry.desandro.com/methods.html», и это закончилось тем, что работало на меня. Я думал, что уже пробовал это - может быть, нет? В любом случае, у меня есть более или менее рабочий пример, но возникли новые проблемы: http://output.jsbin.com/runewidapi/2/

 Смежные вопросы

  • Нет связанных вопросов^_^