Question

经过3天尝试解决问题之后，我来找你，stackoverflow的优秀人才。

我设法在我的网站上创建了一个非常漂亮的响应式砌体类型库，我在CodePen上找到了这里 - http://codepen.io/justinklemm/pen/iCelj

看看它在我的网站上的样子 - dangoodeofficial.co.uk/290-2

HTML

<div class="gallery">
<img src="http://31.media.tumblr.com/tumblr_loumsfBCuE1qeo682o1_500.jpg">
<img src="http://24.media.tumblr.com/tumblr_m1yru9PNMV1qeo682o1_500.jpg">
<img src="http://24.media.tumblr.com/tumblr_m24ic6kY6Q1qeo682o1_500.jpg">
<img src="http://31.media.tumblr.com/tumblr_lriz0lDN2y1qeo682o1_500.jpg">
<img src="http://24.media.tumblr.com/tumblr_lrmgjaL62O1qeo682o1_500.jpg">
</div>

CSS

body {
padding: 2px 0 0 2px;
} 

.gallery img {
float: left;
padding: 0 2px 2px 0;
}

JAVASCRIPT

function scaleGallery()
{
// This is roughly the max pixels width/height of a square photo
var widthSetting = 400;

// Do not edit any of this unless you know what you're doing
var containerWidth = $(".gallery").width();
var ratioSumMax = containerWidth / widthSetting;
var imgs = $(".gallery img");
var numPhotos = imgs.length, ratioSum, ratio, photo, row, rowPadding, i = 0;

while (i < numPhotos) {
ratioSum = rowPadding = 0;
row = new Array();
while (i < numPhotos && ratioSum < ratioSumMax) {
    photo = $(imgs[i]);
    // reset width to original
    photo.width(""); 
    ratio = photo.width() / photo.height();
    rowPadding += getHorizontalPadding(photo);
    // if this is going to be first in the row, clear: left
    if(ratioSum == 0) photo.css("clear", "left"); else photo.css("clear",         "none");
    ratioSum += ratio;
    row.push(photo);
    i++;
    // if only 1 image left, squeeze it in
    if(i == numPhotos - 1) ratioSumMax = 999;
}
unitWidth = (containerWidth - rowPadding) / ratioSum;

row.forEach(function (elem) {
  elem.width(unitWidth * elem.width() / elem.height());
});
}
}

function getHorizontalPadding(elem)
{
var padding = 0;
var left = elem.css("padding-left");
var right = elem.css("padding-right");
padding += parseInt(left ? left.replace("px", "") : 0);
padding += parseInt(right ? right.replace("px", "") : 0);
return padding;
}

$(window).load(scaleGallery);
$(window).resize(scaleGallery);

我现在想要达到的目标与此非常相似 - http://thesaxman.com/#gallery

我对HTML / CSS并不擅长，所以我不知道从哪里开始，因为我尝试从许多不同的悬停效果教程中获取示例，但我无法获得任何工作。

任何帮助都将受到高度赞赏。

谢谢，

丹

具有内容悬停效果的自适应图像库

0 个答案: