יצירת גלריית תמונות דינמי עם מסננים וממיין שימוש ב- Javascript

מבוא

בניית גלריה תמונה דינמי עם סינון ויכולות מיון הופכת אוסף תמונה סטטי לחוויה מרתקת וידידותית למשתמש.מבקרים יכולים למצוא במהירות תמונות שמתאימות לאינטרסים שלהם - לדוגמה, סינון על ידי הטבע, העיר או האנשים - וסידור תוצאות על ידי שם, תאריך, או דירוג ללא עומס דף מחדש. מאמר זה מספק גישה מקיפה, מקריאה לייצור גלריה כזו באמצעות JavaScript, ו- CSS, כדי לעקוב אחר מבנה יעיל, כדי לשפר את הביצועים היעילים שלך, ובאופן יעיל, עצלן, כדי לשפר את הביצועים היעיל ביותר, עצלן, ובאופן יעיל יותר, עצלן, ובאופן יעיל יותר, עצלן, עצלן, עצלן, עצלן, כדי לשפר את הביצועים שלך.

הקמת מבנה HTML

קרן HTML מובנת היטב הופכת סינון ומיין פשוט.כל אלמנט תמונה צריך לשאת מותאם אישית (FLT:0) תכונות המתארות את הקטגוריה, שם, תאריך או כל נכס אחר שאתה מתכוון לסנן או למיין על ידי.

בסיס לפילטרים ובקרת מיון

(ב) יש צורך ב[[המאה ה-20]], ב[[1924]] וב[[1924]], [[1924]], [[1924]]]], [[1924]]

<div id="controls">
 <div id="filter-buttons" role="group" aria-label="Filter photos by category">
 <button data-filter="all" class="active">Show All</button>
 <button data-filter="nature">Nature</button>
 <button data-filter="city">City</button>
 <button data-filter="people">People</button>
 </div>
 <div id="sort-options" role="group" aria-label="Sort photos">
 <button data-sort="name">Sort by Name</button>
 <button data-sort="date">Sort by Date</button>
 <button data-sort="rating">Sort by Rating</button>
 </div>
</div>

(ב) כולל (FLT:5) ו-FLT:6 משפר נגישות למשתמשי קורא מסך.הלחם 7 מסומן עם מחלקה FLT:8 כדי לציין את המדינה הראשונית; אתה תעצב את זה עם CSS.

צילום: Container

(ב) ב[[1924]], [[1924]]]], [[1924]]]]]], [[1924]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]]]], [[1924]]]]]]

<div id="gallery" class="photo-grid">
 <div class="photo" data-category="nature" data-name="Sunset Over the Hills" data-date="2023-06-15" data-rating="4.5">
 <img src="images/sunset.jpg" alt="Sunset over rolling hills" loading="lazy">
 <div class="photo-caption">Sunset Over the Hills</div>
 </div>
 <div class="photo" data-category="city" data-name="Downtown Skyline" data-date="2023-07-01" data-rating="4.2">
 <img src="images/skyline.jpg" alt="Downtown skyline at dusk" loading="lazy">
 <div class="photo-caption">Downtown Skyline</div>
 </div>
 <!-- more photos -->
</div>

המאפיין מאופיין ניכוי תמונות מסך, שיפור ביצועי טעינת העמוד הראשוני.כל עטוף תמונה יכול לכלול גם כיפוף או overlay עבור מידע נוסף.

שימוש בנתונים ב-Inttributes ביעילות

(ב) [ה] [ה]] [ה]] [ה]] [ב]] [ב[[המאה ה'], לא ניתן ל[[המאה ה-20] ל[[המאה ה-20]], אלא אם כן, ב[[1924]],]], [[1924]]]], [[1924]]]], [[1924]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]], [[1924]]]], [[1924]]]]]]]]]]]]]], [[1924]]]]]]]]]]]]]]]]]]]]]], [[1924]]]]]]]]]], [[1924]], [[1924]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]], [[1924]]]]]], [[1924]], [[1924]]]]]], [[1924]], [[1924]]]], [[1924]]]]]]]], [[1924]]]]]], [[1924]]]]]]]], [[1924]]]], [[1924]]]]]], [[1924]]]]]]]], [[1924]], [[1924]], [[1924]], [[

סטולינג הגלריה עם CSS

פריסה נקייה ותגובה קובעת את הבמה לתכונות אינטראקטיביות. השתמש ב-CSS Grid או Flexbox לרשת התמונות, ולעצב את הכפתורים כדי לציין מסננים פעילים ומדינת מיון.

צילום: Grid Layout

.photo-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 1rem;
 padding: 1rem 0;
}

.photo {
 position: relative;
 overflow: hidden;
 border-radius: 8px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.photo img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.3s ease;
}

.photo:hover img {
 transform: scale(1.05);
}

רשת זו מבטיחה תמונות להסתגל לגודל המסך.אפקט המרחף מוסיף אינטראקציה זום עדין, מה שהופך את הגלריה להרגיש יותר מלוטש.

מדינה פעילה עבור Buttons

#filter-buttons button.active,
#sort-options button.active {
 background-color: #007acc;
 color: #fff;
 border-color: #007acc;
}

button {
 padding: 0.5rem 1rem;
 border: 1px solid #ccc;
 background: #fff;
 cursor: pointer;
 margin: 0.25rem;
 border-radius: 4px;
 transition: background 0.2s, color 0.2s;
}

button:hover {
 background: #e6e6e6;
}

החלת שיעור הפילטר / הסימון הנוכחי מספק משוב חזותי. JavaScript יתנהל ויסיר את השיעור הזה.

שיקולים אחראיים

ודא שהגלריה עובדת על מכשירים מגע.להגדיל את גודל היעד של כפתור מגע לפחות 44px על ידי 44px (WCAG 2.1 המלצה) השתמש בשאילתות מדיה אם יש צורך לעבור מרשת רב-קומיין לטור אחד על מסכים קטנים מאוד.

יישום Javascript filter

עכשיו אנחנו מביאים את הגלריה לחיים.הרעיון המרכזי: להקשיב לקליקים על כפתורי סינון, ואז להראות או להסתיר אלמנטים תמונה המבוססים על התכונה שלהם.

בחירת DOM Elements ו-Preizing

const filterButtons = document.querySelectorAll('#filter-buttons button');
const sortButtons = document.querySelectorAll('#sort-options button');
const gallery = document.getElementById('gallery');
let photos = Array.from(gallery.children);
let activeFilter = 'all';
let activeSort = 'name'; // default sort

⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

המונחים: logic

function filterPhotos(filter) {
 activeFilter = filter;
 photos.forEach(photo => {
 const categories = photo.dataset.category; // may be a space-separated string
 const shouldShow = filter === 'all' || categories.split(' ').includes(filter);
 photo.style.display = shouldShow ? '' : 'none';
 });
 // After filtering, re-sort the visible photos
 sortPhotos(activeSort);
}

(ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

הודעות ל-Shine Buttons

filterButtons.forEach(button => {
 button.addEventListener('click', () => {
 const filter = button.dataset.filter;
 // Update active class on filter buttons
 filterButtons.forEach(btn => btn.classList.remove('active'));
 button.classList.add('active');
 // Apply filter
 filterPhotos(filter);
 });
});

הסרת מעמד ה-FLT:33 מכל הכפתורים והוספתו לרכיבה המלחיצה מבטיחה עקביות חזותית.

יישום JavaScript

מיון מחדש את התמונות הגלויות בDOM בהתבסס על תכונה שנבחרה (למשל, שם, תאריך, דירוג).

המונחים: Function

function sortPhotos(sortBy) {
 activeSort = sortBy;
 // Get currently visible photos (display not 'none')
 const visiblePhotos = photos.filter(photo => photo.style.display !== 'none');

 visiblePhotos.sort((a, b) => {
 let valA, valB;
 switch (sortBy) {
 case 'name':
 valA = a.dataset.name.toLowerCase();
 valB = b.dataset.name.toLowerCase();
 return valA.localeCompare(valB);
 case 'date':
 valA = new Date(a.dataset.date);
 valB = new Date(b.dataset.date);
 return valA - valB;
 case 'rating':
 valA = parseFloat(a.dataset.rating);
 valB = parseFloat(b.dataset.rating);
 return valB - valA; // descending: highest first
 default:
 return 0;
 }
 });

 // Re‑append sorted photos back to the gallery container
 visiblePhotos.forEach(photo => gallery.appendChild(photo));
}

מיון יצירות רק בתמונות גלויות, כלומר לאחר שינוי מסנן אתה לשחזר את ההזמנה על פי הסוג הפעיל.עבור מחרוזת, אנו משתמשים ב-FLT:36 עבור הזמנה אלפביתית נאותה.תאריךים הם בהשוואה לאובייקטים תאריך, ודירוגים מתואמים בסדר יורד (בעיקר פופולרי הראשון).

האזנה ל-מיין Buttons

sortButtons.forEach(button => {
 button.addEventListener('click', () => {
 const sortBy = button.dataset.sort;
 sortButtons.forEach(btn => btn.classList.remove('active'));
 button.classList.add('active');
 sortPhotos(sortBy);
 });
});

כאשר כפתור מסוג זה נעדכן את הכיתה הפעילה ונקרא ל-FLT:38 עם מפתח מסוג זה הרצוי.

התקנה ראשונית

// Set default active buttons
document.querySelector('#filter-buttons [data-filter="all"]').classList.add('active');
document.querySelector('#sort-options [data-sort="name"]').classList.add('active');

// Load and initially sort by name
filterPhotos('all');

קריאה (FLT:42) בתחילתה מבטיחה את הגלריה מאוכלסת בכל התמונות ומיין על ידי ברירת המחדל (שם).

פילטר וחיפוש

מסנן קטגוריה פשוט הוא שימושי, אבל ייתכן שתרצה לשלב מסננים מרובים או להוסיף קלט חיפוש טקסט.השיפורים הבאים לבנות על לוגיקה הליבה.

מספר מסננים (Checkboxes)

במקום כפתורים בלעדיים, השתמש ב- Checkboxes כך שמשתמשים יכולים לבחור קטגוריות מרובות:

<div id="filter-checkboxes">
 <label><input type="checkbox" value="nature" checked> Nature</label>
 <label><input type="checkbox" value="city" checked> City</label>
 <label><input type="checkbox" value="people" checked> People</label>
</div>

לאחר מכן לשנות את ההיגיון המסנן כדי לבנות קבוצה של קטגוריות פעילות:

function filterPhotosByCheckboxes() {
 const checked = document.querySelectorAll('#filter-checkboxes input:checked');
 const activeCategories = Array.from(checked).map(cb => cb.value);

 photos.forEach(photo => {
 const photoCategories = photo.dataset.category.split(' ');
 const shouldShow = activeCategories.length === 0 ||
 photoCategories.some(cat => activeCategories.includes(cat));
 photo.style.display = shouldShow ? '' : 'none';
 });
 sortPhotos(activeSort);
}

אם לא בודקים ארגזים, ייתכן שתבחר להציג את כל התמונות (כמו בקוד לעיל) או להראות אף אחד - לא להשמיץ את ה-UX הרצוי.

חיפוש טקסט Input

הוסף שדה קלט אשר מחפש כישרות או תכונת FLT:45:

<input type="text" id="search" placeholder="Search photos...">

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', () => {
 const query = searchInput.value.toLowerCase();
 photos.forEach(photo => {
 const name = photo.dataset.name.toLowerCase();
 // Also search in caption if present
 const caption = photo.querySelector('.photo-caption')?.innerText.toLowerCase() || '';
 const matches = name.includes(query) || caption.includes(query);
 // If a filter is active, also check category
 const filter = activeFilter;
 const catMatch = filter === 'all' || photo.dataset.category.split(' ').includes(filter);
 photo.style.display = (matches && catMatch) ? '' : 'none';
 });
 sortPhotos(activeSort);
});

לשלב חיפוש עם כפתורי סינון כדי לאפשר לצמצום תוצאות נוספות. Note כי אתה צריך לאחסן את מצב המסנן הנוכחי לכבד אותו במהלך החיפוש.

ביצועים וגישה

גלריה דינמית צריכה להיות מהירה וניתנת לשימוש על ידי כולם, כולל אנשים המשתמשים בטכנולוגיות מסייעות.

תמונות נזילות

השתמשנו כבר ב-FLT:48 אשר מפרשים עד התמונה נמצאת ליד ה- Viewport.עבור דפדפנים ישנים יותר, ניתן ליישם גירעון של JavaScript עצלן באמצעות ה-FLT:0 Intersection Observer APIFLT:1 זה מבטיח שגם אם טעינה עצלנית לא נתמכות, תמונות מסך מחוץ למסך אינן טעון, צמצום רוחב הפס ושיפור ביצועים.

חיפוש חיפוש חיפוש

אם אתה מצמיד את המקשיב לחיפוש ל-FLT:49, הוא יורה על כל מקשטרוקה.עבור גלריות גדולות, לשקול לרוקן את המטפל (למשל, 200ms איחור) כדי למנוע מניפולציה מוגזמת של DOM.

function debounce(func, delay) {
 let timeoutId;
 return function (...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => func.apply(this, args), delay);
 };
}
searchInput.addEventListener('input', debounce(handleSearch, 200));

Keyboard Navigation
Filter and sort buttons should be focusable and operable via keyboard. Using native <button> elements already provides keyboard interaction (Enter/Space). Ensure that after filtering or sorting, focus is managed logically; for example, you could move focus to the first photo after a filter change via a focusable element. Also, consider adding aria-pressed attributes to filter buttons to indicate toggle state.

Announcing Changes to Screen Readers
Use an ARIA live region to announce filter and sort results:
<div id="gallery-announce" aria-live="polite" class="sr-only"></div>
לאחר כל פעולת סינון / אוטוט, לעדכן את הטקסט של אלמנט זה, למשל, "הצגת 8 תמונות טבע ממומנות בשם" זה עוזר למשתמשים שמבוססים על קוראי מסך להבין מה השתנה.
CSS for Hidden Content
במקום להשתמש ב-FLT:51 בלבד, יש לקחת בחשבון את השימוש ב-CSS כמו FLT:52, אשר מסתיר את האלמנט ומסיר אותו מעץ הנגישות:
.hidden {
 display: none !important;
 visibility: hidden;
}
(ב) שימוש בעץ הנגישות, אשר מתאים רק להבטיח שלא תסמכו על נטילי פְּטְטַבְטַם (FLT:54) ללא פְּטַפְּטַפְּטְטַה, כי זה משאיר את האלמנט הכובש.
מסקנה
על ידי שילוב של HTML סמנטאלי נקי, CSS תגובתי, ו- JavaScript מובנה היטב, אתה יכול לבנות גלריה תמונה דינמי כי הוא מהיר, נגיש, ונעים לשימוש. הטכניקות מכוסה - סינון על ידי קטגוריה (כולל קטגוריות מרובות), מיון על ידי תכונות שונות, הוספת חיפוש וקידוד ביצועים - לספק בסיס מוצק שניתן להרחיב עם תכונות כגון דמיון, גלילה אינסופית, או שילוב עם API אחורי.
לקריאה נוספת, ה- 0 (התיעוד של Array.prototype.sort) sort (ראה אלגוריתם:0) מסביר את האלגוריתם הממיין, ואת ה-FLT:2web.dev Reacter Revisor design guide guide guide Guide (FLT 3: 3) מציע טיפים נוספים לחיקוי.ניסוי עם תכונות נתונים שונות, אנימציה והתאמה אישית כדי להתאים את הגלריה לצרכים של הפרויקט שלך.