2015-01-13 2 views
4

Я ценю, что я мог просто «попробовать его и увидеть», но я предпочел бы ошибаться в стороне от осторожности здесь и спросить, есть ли у кого-либо предшествующий опыт в этом вопросе или знания, которые дайте ответ;)Производительность элементов с абсолютным позиционированием

Я работаю над функцией, которая будет включать в себя множество элементов (около 800) в контейнере, подобном холсту. Все это <div> элементов с background-image. Они будут выровнены по сетке.

У меня есть некоторые идеи для аккуратных анимации, которые вовлекают transition ИНГ элементов на новые позиции, когда некоторые из них добавлены или удалены - это будет связан с position:absolute и установкой left и top соответствующим образом.

Я хотел бы знать, насколько хорошо браузеры будут обращаться с такими вещами, или если бы мне было бы лучше, просто используя display:inline-block и позволяя им течь, как они были бы - без опрятных переходов.

Короче говоря, мне просто интересно, если использование position:absolute, т.е. удаление элементов из потока документов было бы слишком большим для браузера, который будет обрабатывать при обновлении, в отличие от простого обеспечения возможности существования элементов в потоке документа.

Это имеет смысл? Я чувствую, что я формулирую это ужасно. XD

+0

Вы можете попробовать 'transform: translate' right? –

+0

@Mr_Green Я мог бы, но я бы предпочел избежать «трансформирования» для функциональности, так как я хотел бы поддерживать IE8 на данный момент. –

+0

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

ответ

0

Если все элементы будут иметь одинаковую высоту, я бы просто использовал display: inline-block или float: left, и они будут хорошо сочетаться.

Если элементы будут иметь разную высоту, они не будут идеально «падать в линию» при плавании или отображении в виде встроенных блоков.

Для последнего использование плагина jquery, такого как Masonry, было бы разумным решением. Масонство использует абсолютное позиционирование, на которое ссылается ваш вопрос, и нет, это не слишком много для того, чтобы браузер «обрабатывал».

Вы можете, конечно же, использовать масонство, если ваши div будут иметь одинаковую высоту.

Без решения скрипта, такого как масонство, я сомневаюсь, что было бы неплохо использовать абсолютное позиционирование на 800 элементах для достижения желаемого результата.