{"_id":"@brianlee_lizhong/photo-album","name":"@brianlee_lizhong/photo-album","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@brianlee_lizhong/photo-album","version":"1.0.0","description":"A custom photo album application","main":"index.js","author":{"name":"lizhongsso"},"license":"MIT","_id":"@brianlee_lizhong/photo-album@1.0.0","gitHead":"4eb04999b31ec5db560a148733ad98d7f09507a4","types":"./index.d.ts","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-MxL9e4OUc5efRFoEehw5o8/6vCED2TrhedqxUzcyf+41ruI+otaCaj9P5KOhAUI6Ui0rgnKBj4c5FEIW3WOdEA==","shasum":"93e3a80c6b47c191ca9ae82faf1fad24568dfbee","tarball":"https://registry.npmjs.org/@brianlee_lizhong/photo-album/-/photo-album-1.0.0.tgz","fileCount":7,"unpackedSize":26156,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDmqIf4I/ZNMXPTxgTc9kSxl5PWUHhvBWbxjP478RpI6QIhAMSu5s01VOQOoZ6mDNn5exS52OCAFslMRSHigg9UI/Li"}]},"_npmUser":{"name":"brianlee_lizhong","email":"lz020316@gmail.com"},"directories":{},"maintainers":[{"name":"brianlee_lizhong","email":"lz020316@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/photo-album_1.0.0_1738813939943_0.1167317074620724"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-06T03:52:19.838Z","1.0.0":"2025-02-06T03:52:20.127Z","modified":"2025-02-06T03:52:20.389Z"},"maintainers":[{"name":"brianlee_lizhong","email":"lz020316@gmail.com"}],"description":"A custom photo album application","author":{"name":"lizhongsso"},"license":"MIT","readme":"### **Row Layout Algorithm**\n\n**Objective:**\n\n- **Maintain Image Proportion**: Do not stretch or compress images, keep the original aspect ratio.\n- **Row Height Consistency**: Make each row's height as close as possible to the **target row height** (e.g., 300 pixels).\n- **Utilize Space Efficiently**: Ensure each row of photos fills the container width (e.g., 1000 pixels) without leaving blank spaces.\n\n---\n\n### **Algorithm Steps**\n\n#### **1. Collect Photo Information**\n\n- **Aspect Ratio of Each Photo**: This is the width divided by the height of the photo.\n    - **Example**: A photo with a width of 600 pixels and a height of 400 pixels has an aspect ratio of 600 ÷ 400 = **1.5**.\n\n#### **2. Consider Possible Photo Combinations**\n\n- **Possible Row Combinations**: We try to combine photos in different ways to form a row, such as:\n    - Row 1: Photo 1\n    - Row 2: Photo 1 and Photo 2\n    - Row 3: Photo 1, Photo 2, and Photo 3\n    - Row 4: Photo 2 and Photo 3\n    - **And so on**\n\n#### **3. Calculate the Height of Each Possible Row**\n\nFor each photo combination, we calculate the row height as follows:\n\n1. **Calculate Total Aspect Ratio**\n\n     - **Total Aspect Ratio** is the sum of the aspect ratios of all photos in the row.\n         - **Example**: If the row contains Photo 1 (aspect ratio 1.5) and Photo 2 (aspect ratio 1.0), the total aspect ratio is 1.5 + 1.0 = **2.5**.\n\n2. **Calculate Row Height**\n\n     - **Row Height** is equal to the container width divided by the total aspect ratio.\n         - **Example**: If the container width is 1000 pixels, row height = 1000 ÷ 2.5 = **400 pixels**.\n\n3. **Evaluate the Difference Between Row Height and Target Row Height**\n\n     - **Difference Value**: Row height minus target row height, indicating how much the row height deviates from the desired height.\n         - **Example**: If the target row height is 300 pixels, difference value = 400 - 300 = **100 pixels**.\n\n     - **Note**: We want this difference to be as small as possible, indicating the row height is close to the target row height.\n\n#### **4. Calculate the \"Cost\" for Each Possible Row Combination**\n\n- **Concept of Cost**: Cost represents the \"expense\" of using a particular photo combination to form a row, i.e., the degree of deviation from the target row height.\n\n- **Method to Calculate Cost**:\n    - We usually use the square of the difference value to represent the cost because:\n        - The square of the difference is always positive, making it easy to compare.\n        - For larger deviations, the square amplifies the cost, discouraging the selection of these combinations.\n\n- **Example**:\n    - Difference value of 100 pixels, cost = 100² = **10,000**.\n    - Difference value of -50 pixels (row height below target row height), cost = (-50)² = **2,500**.\n\n#### **5. Find the Optimal Photo Arrangement**\n\n- **Core Idea**: By calculating the cost of all possible row combinations, we can find the photo arrangement with the smallest total cost.\n    - **Total Cost**: The sum of the costs of all rows.\n\n- **Implementation Method**:\n    - **Try Each Combination**: Although there are many possible combinations, we can efficiently calculate and compare them using an algorithm.\n    - **Choose the Path with the Lowest Cost**: Ultimately, select the combinations where the row height is closest to the target row height.\n\n#### **6. Adjust Photo Sizes and Render**\n\n- **Calculate Display Width for Each Photo**:\n\n    - **Display Width** = Row height × Photo's aspect ratio.\n        - **Example**: If the row height is 400 pixels and the photo's aspect ratio is 1.5, display width = 400 × 1.5 = **600 pixels**.\n\n- **Render Photos**:\n\n    - Apply the calculated dimensions to the photos, maintain proportions, and arrange them in a row.\n\n---\n\n### **A Specific Example**\n\nSuppose we have the following 5 photos:\n\n| Photo Number | Aspect Ratio |\n|--------------|--------------|\n| Photo 1      | 1.5          |\n| Photo 2      | 1.0          |\n| Photo 3      | 1.2          |\n| Photo 4      | 0.8          |\n| Photo 5      | 1.4          |\n\n**Container Width**: 1000 pixels\n\n**Target Row Height**: 300 pixels\n\n**Steps**:\n\n1. **Try Different Row Combinations**:\n\n     - **Combination 1**: Photos 1, 2, and 3\n\n         - Total aspect ratio: 1.5 + 1.0 + 1.2 = **3.7**\n         - Row height: 1000 ÷ 3.7 ≈ **270 pixels**\n         - Difference value: 270 - 300 = **-30 pixels**\n         - Cost: (-30)² = **900**\n\n     - **Combination 2**: Photos 4 and 5\n\n         - Total aspect ratio: 0.8 + 1.4 = **2.2**\n         - Row height: 1000 ÷ 2.2 ≈ **455 pixels**\n         - Difference value: 455 - 300 = **155 pixels**\n         - Cost: (155)² = **24,025**\n\n2. **Compare Costs**:\n\n     - Combination 1 has a cost of 900, Combination 2 has a cost of 24,025.\n     - Clearly, Combination 1 is closer to the target row height.\n\n3. **Determine the Best Arrangement**:\n\n     - We might choose to place Photos 1, 2, and 3 in the first row, and Photos 4 and 5 in the second row.\n     - Total cost is 900 (first row) + 24,025 (second row) = **24,925**.\n\n4. **Try Other Combinations**:\n\n     - If we try placing Photos 1 and 2 in the first row, and Photos 3, 4, and 5 in the second row, we might get a smaller total cost.\n\n5. **Final Selection**:\n\n     - After comparison, we choose the photo arrangement with the smallest total cost.\n\n---\n\n### **Key Points Summary**\n\n- **Smaller Cost** indicates the row height is closer to the target row height, resulting in a more ideal layout.\n- **Squared Cost** penalizes larger deviations more, encouraging the algorithm to choose rows with more balanced heights.\n- **Maintain Aspect Ratio** to ensure photos are not distorted and present the best visual effect.\n\n---\n\n### **Why Do This?**\n\n- **User Experience**: A photo wall with consistent row heights looks more organized and aesthetically pleasing, enhancing the user's browsing experience.\n- **Performance Optimization**: The algorithm automatically finds the best photo arrangement, saving the hassle of manual adjustments.\n- **Adapt to Different Photo Sizes**: Regardless of the aspect ratio of the photos, the layout can automatically adjust to form a harmonious arrangement.","readmeFilename":"README.md"}