jr/jakesphotos
1
0
Fork 0
mirror of https://github.com/runyanjake/jakesphotos.git synced 2025-10-05 07:57:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Shuffle image

Browse Source
This commit is contained in:
Jake Runyan 2024-12-27 11:09:40 -10:00
parent 429110ce61
commit 8843034a15
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Home.js
View File

@ -3,14 +3,26 @@ import Masonry from 'masonry-layout';
import images from '../data/Images'; // Import the image URLs
import './Home.css'; // Ensure you have your CSS for styling
// Shuffle function to randomize the array
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]]; // Swap elements
}
return array;
};
const Home = () => {
const masonryRef = useRef(null);
// Shuffle images on component mount
const shuffledImages = shuffleArray([...images]); // Create a copy and shuffle
useEffect(() => {
const masonry = new Masonry(masonryRef.current, {
itemSelector: '.gallery-photo',
columnWidth: '.gallery-photo',
percentPosition: true
percentPosition: true,
});
// Layout Masonry after images have loaded
@ -33,8 +45,8 @@ const Home = () => {
return (
<div className="gallery" ref={masonryRef}>
{images.map((image, index) => (
<img key={index} src={image} alt={`Jake Runyan ${index + 1}`} className="gallery-photo" />
{shuffledImages.map((image, index) => (
<img key={index} src={image} alt={`© Jake Runyan ${index + 1}`} className="gallery-photo" />
))}
</div>
);