0

老实说，我不知道从哪里开始。但我脑子里有了这个想法，我非常想看看它是否可以执行。

我正在使用Instagram jQuery 插件来加载基于主题标签的 Instagram 图像。我想要实现（或者更确切地说，有人帮我实现）是根据窗口大小设置要加载的图像数量和它们的宽度。

前任。1 如果窗口为 1200px 宽，则在每个图像上加载 12 张宽度为 100px 的图片 ex。2 如果窗口为 800px 宽，则在每张图像上加载 10 张宽度为 80px 的图片等...

但这必须动态完成，以便图像的数量及其宽度始终对应于窗口宽度的总和。这是为了确保只有一行图像（不使用“溢出隐藏”等）。

这是我到目前为止所拥有的

$(document).ready(function() {
var insta_container = $(".instaflow"), insta_next_url

insta_container.instagram({
    hash: 'ASuperAwesomeHashTag',
    clientId : 'MY_CLIENT_ID',
    show : 16,
    onComplete : function (photos, data) {
        insta_next_url = data.pagination.next_url
        var instaimg = $('img.instagram-image');
        instaimg.css({ 'width': ($(window).width()/1) });
    }
})

$('button').on('click', function(){
var button = $(this), text = button.text()

    if (button.text() != 'LOADING' && button.hasClass('icon-plus-sign-alt')){
        button.removeClass('icon-plus-sign-alt')
        button.addClass('loading')
        button.text('LOADING')
        insta_container.instagram({
            next_url : insta_next_url,
            show : 8,
            onComplete : function(photos, data) {
                if ($('.instagram-placeholder').children().text() != ""){
                    button.remove();
                }
                insta_next_url = data.pagination.next_url
                button.text(text)
                button.removeClass('loading')
                button.addClass('icon-plus-sign-alt')
            }
        })
    }
})
});

因此，“显示”值必须与要使用的宽度相关。在只有 600 像素宽的窗口中加载 20 张照片看起来不太好。+ 我想确保只有一行图像（不使用隐藏在 DIV 上的溢出等。由于有一个加载更多按钮，如果它们被“困”在 DIV 中，它不会显示“更多图片” “cuts of”）。这就是为什么我还需要根据具有窗口宽度的图像数量来定义宽度。

我知道这可能是一个“分散”的问题。但是，如果有人觉得他们可以帮助我完成这项工作，我将非常感激。

4

1 回答 1

0

这将始终留下每个尺寸为 100 像素的图像

var img_amount = $(window).width()/100;
//in this case each image dimension will be 100px
var img_dimension = $(window).width()/img_amount; 
//if you want to go for a cross browser solution and not use the css property 'box-sizing'
//subtract the padding and margins of the images (if any)
img_dimension -= [padding + margin];
//subtract any borders
img_dimension -= [border width];

现在，如果您想在不扭曲页面布局的情况下拥有尽可能多的图片，您可以执行以下操作：

var reduced_dimension = $(window).width()/100;
var min_amount = 6;
var img_amount = min_amount + parseInt(reduced_dimension/2);

这样如果窗口宽度是 800px，那么img_amoung = 6 + parseInt(8/2)这将是 10

要根据最小图像宽度和最小图像高度确定图像数量，您可以这样做：

function determineAmount(width, divisor){
    var reduced_dimension = width/divisor;
    var min_dimension = 50; //minimum 50px
    var max_dimension = 250; //maximum 250px
    var min_amount = 6;
    //start calculations
    var img_amount = min_amount + parseInt(reduced_dimension/2);
    var img_dimension = width/img_amount;
    if(img_dimension < min_dimension){
       return determineAmount(width, divisor + 10);
    }
    else if(img_dimension > max_dimension){
       return determineAmount(width, divisor - 10);
    }

    return {'amount':img_amount,'dimension':img_dimension};
}

你会这样称呼它：determineAmount($(window).width(), 100)
jsfiddle：http: //jsfiddle.net/jwhrQ/

于 2013-08-06T16:10:47.407 回答