Масонство: какова цель свойства columnWidth?

Когда мы определяем макет каменной кладки, нам нужно указать свойство columnWidth в javascript следующим образом:

$maincontent.masonry({
    columnWidth: 200,
    itemSelector: '.hentry',
    isFitWidth: true,
    isAnimated: true
});

И затем в CSS мы все равно определяем ширину столбцов. Итак, скажем, для моего css для столбца каменной кладки у меня есть такое определение ширины:

#main article {
    margin: 0 20px 35px;
    width: 360px; /* Here I can give a width different than what I specified in javascript above */
    float: left;
}

И макет каменной кладки все еще срабатывает и использует ширину, которую я указал в css. Так что я не понимаю, какова цель указания ширины в javascript?


javascript css column-width masonry jquery-masonry
person Vik    schedule 27.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Все параметры необязательны, но columnWidth и itemSelector рекомендуются. Если columnWidth не установлено, Masonry будет использовать внешнюю ширину первого элемента.

вы даже можете определить их внутри тега div, используя data-masonry-options :

<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

вместо вашего кода Jquery попробуйте изменить columnWidth с помощью data-masonry-options, и вы заметите, что разница здесь заключается в LIVE ДЕМО

Или исправьте свой код Jquery, он должен быть таким:

$('#maincontent').masonry({   // <---- instead of $maincontent.masonry
    columnWidth: 200,
    itemSelector: '.hentry',
    isFitWidth: true,
    isAnimated: true
});

если maincontent является классом, используйте этот селектор вместо $('.maincontent')

person ZEE    schedule 27.02.2015
comment
Спасибо за ответ. Что делать, если значение ширины столбца, которое я определяю в javascript, отличается от значения ширины, которое я определяю в css? Я пробовал это во фрагменте кода, который я указал выше в своем вопросе. И это все еще работает, и я вижу, что значение ширины css применяется. Значение ширины столбца javascript не применяется. Так что же это значит? - person Vik; 27.02.2015
comment
codepen.io/desandro/pen/osFxj поэкспериментируйте с шириной в этом примере, и вы увидите почтение - person ZEE; 27.02.2015
comment
на самом деле проблема в вашем коде, так как вы реализуете with в своем файле js, это ложь - person ZEE; 27.02.2015
comment
Спасибо за ваш ответ. Фрагмент кода, который я разместил выше, является лишь небольшой частью кода, который я использую. Извините, я должен был указать, что я кэшировал $('#maincontent') в переменную с именем $maincontent. Этот вопрос был очень специфичен для свойства columnWidth. Мой фактический код и проблему можно увидеть здесь, в этом вопросе - stackoverflow.com/questions/28757981/ - person Vik; 27.02.2015
comment
я ответил о columnWidth и оставил пример, чтобы заметить уважение, пожалуйста, проверьте эту ссылку codepen.io/desandro /pen/osFxj, - person ZEE; 27.02.2015