Как получить количество столбцов CSS3 в Javascript

Question

Мы используем новые многостолбцовые свойства макета css3 для переноса нашего текста в газетные колонки.Каждый столбец получает фиксированную ширину, а число столбцов по умолчанию равно «auto», что означает, что браузер решает, сколько столбцов есть.

Как получить фактическое количество столбцов в виде целого числа в Javascript?

Если мы запросим css "column-count" (или -moz-column-count), мы получим либо "auto", либо пробел в результате.

Answer 1

Секрет в том, чтобы поставить небольшой маркер в конце содержимого.Вы можете программно добавить пустой диапазон:

<span id="mymarker"></span>

, затем захватить диапазон, используя jquery $ ("# mymarker") и получить свойство left.Разделите это число на ширину столбцов (с учетом пробела в столбцах), и это скажет вам, в каком столбце находится этот последний элемент. Math.ceil () для значения, и у вас будет количество столбцов.

Answer 2

Попробуйте это:

$.fn.howMuchCols = function(){
  return Math.round($(this).find(' :last').position().left - $(this).position().left / $(this).outerWidth()) +1;
};

$('.my-stuff-with-columns').howMuchCols();

Объяснение кода :

Этот код создаст функцию 'howMuchCols' для каждого элемента jQuery.

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

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

В коде я добавил размер одного столбца после выполнения вычитанияи деление, а не использование пиксельной единицы перед делением (это не имеет значения).

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

Answer 3

могли бы вы установить класс для каждого столбца, например class = "another-column", а затем использовать Jquery для выбора классов и их итерации.

var count = 0;
$('.another-column').each(function(){
    count++;
});

Предупреждение, это не проверено.Если бы вы могли предоставить некоторый html / css3-код, я мог бы проверить его на jsfiddle