Компонент потока Vue.js на основе водопадов
Демонстрационный адрес:huayan.site/waterfall
Преимущества планировки «водопад»
Поток водопада эффективен и привлекателен для отображения изображений. Режим быстрого чтения пользователя может получить больше информации за короткое время, а режим ленивой загрузки в потоке водопада позволяет избежать прокрутки щелчком мыши пользователя. Работа со страницей, Основная особенность потока водопада - пэчворк, дизайн фиксированной ширины, но не фиксированной высоты, отличает страницу от традиционного режима макета матричного изображения, умное использование визуальной иерархии, произвольный поток взгляда облегчает визуальную усталость, и в то же время дает С эклектичным чувством люди поражают персонализированную психологию молодежи. Появились также отечественные веб-сайты, подобные Pinterest.Существует более 40 известных веб-сайтов, и существует четыре типа веб-сайтов, подобных Pinterest.Одним из них является справочник по покупкам в электронной коммерции, такой как Want to Go.com, Mogujie, Meilishuo, Haoxiangshuo. , и опираясь на платформу Taobao, второй — это совместное использование графиков интересов, таких как Zhimei, Petals и т. д., третий — в разделенных вертикальных полях, таких как контроль закусок для гурманов и другие племена для индустрии товаров для дома. В-четвертых, информационные платформы по дизайну одежды, такие как Kanchao.com и так далее.
Классификация водопадов:вертикальный водопада такжегоризонтальный водопад
Список изображений разделен на фиксированные столбцы, каждое изображение или контейнер имеют одинаковую ширину, а высота и ширина масштабируются пропорционально (поэтому высота изображений в разных пропорциях различна), как показано на следующем рисунке:
Высота изображения или контейнера остается неизменной, сумма отображаемых ширин изображений каждой строки равна ширине страницы, а высота и ширина масштабируются пропорционально (поэтому ширина изображений в разных пропорциях отличается ), но поскольку ширины может не хватить только для заполнения строки, поэтому применяется метод вырезания изображений, как показано на следующем рисунке:
How to use
Как попытка водопадного потока, он не был упакован и выпущен, исходный код компонента находится в./src/components/Waterfall.vue, этот пример используется только как демо, которое может быть изменено на этой основе в соответствии со сценарием использования.
иллюстрировать
В этом примере данные, которые должны быть возвращены из серверной части, включают данные о размере изображения. Если передняя часть используется для расчета ширины и высоты изображения, это будет стоить большого количества сети и производительности. В нашем проекте фактически используется ширина изображения, возвращенного из задней части, а высота для расчета масштаба, отображаемого в водопаде, сохраняя искажение изображения.
Props
| prop | type | description |
|---|---|---|
| list | Array | Список изображений |
| row | Boolean | Располагать ли горизонтально |
| column | Number | � Если он расположен не горизонтально, столбец представляет собой несколько столбцов (по умолчанию 4 столбца) |
| height | Number | Если он расположен горизонтально, высота — это высота, которая не должна занимать ни одна строка (по умолчанию 225 пикселей). |
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportFor a detailed explanation on how things work, check out the guide and docs for vue-loader.