Project framework: vue3 + JS + vite Waterfall framework: vue-waterfall-next Asked chatGPT about useful waterfall flow plug-ins for vue3, and the answer was as follows: For Vue 3, there are a few waterfall plugins available. The following are several commonly used Vue 3 waterfall plug-ins: vue-waterfall-next: This is a waterfall flow plug-in based on Vue […]
Tag: waterfall
React image waterfall flow
Idea: Determine the number of columns according to the width of the browser. The requested image list data is 10 times the number of columns. The data is rendered according to the number of columns. Index.js: import React from ‘react’ import { connect } from ‘react-redux’ import { withRouter } from ‘react-router-dom’ import { SinglePageHeader […]
React implements a waterfall flow component (TypeScript) that supports width responsiveness, supports any number of columns, supports bottom loading, and has good TS type support
1. Preface Waterfall flow is a very common layout that can be used on both mobile and PC. Its main feature is that each element has the same width but unequal height. (For example, when we visit Taobao, the product display is a waterfall flow) If the waterfall flow only uses CSS, the effect is […]
184_Python draws stacked waterfall charts in Excel and Power BI
184_Python draws stacked waterfall charts in Excel and Power BI 1. Background On August 22, 2023, Microsoft Excel officially announced that Python is natively supported in Excel. Blog original text The author updated to the preview version of Excel as soon as possible. After a long wait for distribution, I can now experience it. Let’s […]
Vue3 waterfall flow dynamically loads images, infinite scrolling in drop-down
Prerequisite knowledge: JavaScript obtains screen height and width and monitors screen size changes https://blog.csdn.net/u014651560/article/details/107027414 js listens to the page or element scroll event and scrolls to the bottom or top https://blog.csdn.net/mouday/article/details/125444003 Common APIs for obtaining the width and height of DOM elements in JavaScript https://juejin.cn/post/7011062379546935303 Various heights (widths) in js https://juejin.cn/post/7017727173528125453 js gets the height […]
Nuxt3 + Vue3 implements waterfall flow and supports SSR
Renderings Implementation method Method Features Advantages Disadvantages column-count The order can only be from top to bottom, then left to right Pure CSS layout code is less and faster Since the sorting order is from top to bottom, then left to right, it can only be used for data fixation and cannot be dynamically loaded […]
Android – use Recycleview to display a list (waterfall method)
android – use Recycleview to display a list (waterfall method) Waterfall method, StaggeredGridLayoutManager It is an extension based on the list, with some annotations added The layout file is as follows: activity_main.xml <?xml version=”1.0″ encoding=”utf-8″?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” tools:context=”.MainActivity”> <androidx.recyclerview.widget.RecyclerView android:id=”@ + id/recycler_view” android:layout_width=”match_parent” android:layout_height=”match_parent” /> </LinearLayout> recycler_view.xml <?xml version=”1.0″ encoding=”utf-8″?> <androidx.constraintlayout.widget.ConstraintLayout […]
Android Studio implements parsing HTML to obtain json, parsing json image URL, saving URL to list, and performing waterfall display
Table of Contents Effect Dependencies added by build.gradle (app) (if not needed, you can not add it) AndroidManifest.xml mistake activity_main.xml item_image.xml MainActivity Image adapter ImageModel receives image URL Effect Dependencies added by build.gradle (app) (you can not add those that are not needed) dependencies {<!– –> implementation ‘com.squareup.picasso:picasso:2.71828’ implementation fileTree(dir: ‘libs’, include: [‘*.jar’]) implementation ‘com.airbnb.android:lottie:3.0.3’ […]
ios swift5 collectionView waterfall flow (two columns)
Article directory 1. Waterfall 1.1 demo address 1.2 Remember to change the minimum deployment version from 8 to 11, 13 or even higher. Otherwise, the compilation will report an error 2. Dynamically calculate the height of pictures and text 1. Waterfall 1.1 demo address CollectionViewWaterfallLayout – github 1.2 Remember to change the minimum deployment version […]
Waterfall flow vue-grid-layout used in vue2 = “project home page, dynamic editing, embedded component module
1. Simple case in vue For details, please see the official website https://jbaysolutions.github.io/vue-grid-layout/zh/ 1. Install components NPM npm install vue-grid-layout –save If there is an error after installation After searching around, it is a version problem, just downgrade the version npm install [email protected] –save 2, vue file <template> <div style=”width: 100%; height: 100%”> <div class=”layoutJSON”> […]