يعمل برنامج تدفق الشلال المصغر على حل مشكلة فجوة الارتفاع الكبيرة جدًا بين الجانبين الأيسر والأيمن

إذا أردنا تحقيق تأثير تخطيط التدفق الشلالي وعرضه بالترتيب من اليسار إلى اليمين، فلن تتمكن طريقة تخطيط CSS من تلبية احتياجاتنا في الوقت الحالي. ارجع إلى تأثير تدفق الشلال في Xiaohongshu، وهو مقسم إلى أعمدة يسار ويمين، ويمكن عرضه وفقًا للأرقام الفردية والزوجية.

 <view class=waterfall> <view class=waterfall-left> <view wx:if={{index%2 == 0}} class=item></view> </view> <view class=waterfall-right> <view wx:if={{index%2 == 1}} class=item></view> </view></view>

ولكن هنا تأتي المشكلة، مع عدم التأكد من ارتفاع كل عنصر، هناك احتمال كبير أن يكون هناك فرق كبير في الارتفاع بين العمودين الأيسر والأيمن.

لحل هذه المشكلة، نحتاج إلى معرفة سبب اختلاف ارتفاع كل عنصر. بشكل عام، يكون ارتفاع الصورة، أو قد يتم عرض بعض المناطق وفقًا للشروط الصورة مختلفة، وارتفاع الأجزاء الأخرى يبقى دون تغيير، مما يجعل حساباتنا بسيطة.

الفكرة العامة هي الحصول على ارتفاع العمودين الأيسر والأيمن لحساب ارتفاع العمودين الأيمن والأيسر، يرجى إدخال فرق درجة الرمز، وتحريك 1/2 threshold الفرق بين العمودين، كما هو موضح في الصورة. الشكل:

ما سبق هو حالة مثالية، ولكن من المستحيل بالنسبة لنا أن نقطع العناصر. يجب أن نعرف ما إذا كانت هناك عناصر في الجانب العلوي مناسبة للحركة، إذا كان minH هو أصغر عنصر في العمود ذو الارتفاع الأعلى. أقل من threshold الفرق، ثم يمكننا نقله، يمكنك أخذ العنصر minH على الجانب الطويل الأقرب إلى نصف ارتفاع الفرق (عادةً العنصر ذو الارتفاع الأصغر، يمكنك أيضًا تحريك العنصر الذي به). أصغر ارتفاع بذكاء). إذا كان العنصر ذو الارتفاع الأصغر أكبر من الفرق، فلا داعي لتحريكه.

فكيف يتم النقل، يتم إعطاء العنصر موضع السمة بشكل افتراضي، والقيمة هي المركز. إذا كان سيتم نقل العنصر إلى اليسار، فقم بإعطاء العنصر سمة: الموضع: اليسار؛ سيتم عرضه أولاً وفقًا لـ خاصية الموضع، ثم حسب الأعداد الفردية والزوجية، كما يلي:

 <view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} class =item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} class=item></view> </view></view>

عند هذه النقطة، يمكن حل مشكلة الاختلافات الكبيرة في الارتفاع.

النقطة الأساسية هي الحصول على عرض الصورة وارتفاعها، حتى نتمكن من معرفة ارتفاع العمودين. هناك حالتان هنا:

1. تقوم الواجهة بإرجاع عرض الصورة وارتفاعها

تقوم الواجهة بإرجاع عرض الصورة وارتفاعها، لذلك إذا قمنا بتجميع ارتفاع الصورة مباشرة، فيمكننا مقارنة ارتفاعات العمودين والحصول على فرق الارتفاع.

إذا كان minH على الجانب العلوي أصغر من فرق threshold بين ارتفاعات العمودين، أي minH < threshold ، فيجب نقل minH .

بهذه الطريقة، أثناء الحصول على البيانات، يمكننا معرفة ما إذا كان العنصر بحاجة إلى النقل. بعد معالجة البيانات، يتم عرضها على الفور إلى طبقة العرض.

هذه الطريقة هي بالطبع الأكثر خالية من القلق، لكن الواجهة قد لا تقوم بإرجاع عرض الصورة وارتفاعها، لذلك يجب استخدام الطريقة الثانية.

2. لا تقوم الواجهة بإرجاع عرض الصورة وارتفاعها، ويتم الحصول على عرض الصورة وارتفاعها في حدث تحميل الصورة.

استمع إلى حدث تحميل الصورة واحصل على عرض الصورة وارتفاعها بعد تحميل الصورة الأخيرة، استخدم borderClientRect لقياس ارتفاع العمودين والحصول على فرق الارتفاع.

في هذه الطريقة، يجب عليك قياس ما إذا كان العنصر يحتاج إلى النقل بعد تحميل الصورة أم لا، وستكون حركة العنصر أكثر وضوحًا.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.