jquery按div height分页(非项)

听起来你想一次加载所有内容,但一次只向用户显示一点。对html内容服务器端进行分页实际上并不可行,而且在任何情况下都与jquery无关。

好的用户体验应该是使用滚动条,而不是尝试重新设计上/下页面。也就是说,如果你必须这样做,那么你需要这样的东西:

$('.pagination').children().wrapAll('<div class="content"/>');
$('.next').click(function() {
    var current = ($('.content').css('margin-top') || '0px');
    $('.content').css('margin-top',current.substring(0,current.length-2) - $('.pagination').height() + 'px');
});

基本的想法是保留您拥有的分页div overflow: hidden 并使用负边距上下移动其中的内容。

不过,还有一次,这是糟糕的用户体验。只需使用滚动条。

我不知道现有的解决方案。不过,使用一些javascript(使用类似jquery的东西)可以计算元素的高度。$(element).height()例如。使用此方法,您可以遍历元素循环,并根据剩余的可用空间将它们添加到div中(我猜设置为常量)。因此,如果我有3个元素,可用高度是100px,jquery为每个元素返回35px的高度,我将显示前两个元素,然后将最后一个元素添加到用户单击next时要显示的队列中。

在中间元素中拆分文本会有点困难,但我想您可以使用字符串解析将元素的文本对半、测量高度、再次对半、测量高度等。这样做不太好,但可能会奏效。

在我看来你只是需要实施 $.scrollTo() :我刚刚使用一个“前进”按钮创建了以下概念(注意:必须引用jquery和scrollto插件:

<button class="next">Next</button>
<div id="pagination">
  <p>The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.</p>
  <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.</p>
  <p>(Representatives and direct Taxes shall be apportioned among the several States which may be included within this Union, according to their respective Numbers, which shall be determined by adding to the whole Number of free Persons, including those bound to Service for a Term of Years, and excluding Indians not taxed, three fifths of all other Persons.) (The previous sentence in parentheses was modified by the 14th Amendment, section 2.) The actual Enumeration shall be made within three Years after the first Meeting of the Congress of the United States, and within every subsequent Term of ten Years, in such Manner as they shall by Law direct. The Number of Representatives shall not exceed one for every thirty Thousand, but each State shall have at Least one Representative; and until such enumeration shall be made, the State of New Hampshire shall be entitled to chuse three, Massachusetts eight, Rhode Island and Providence Plantations one, Connecticut five, New York six, New Jersey four, Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five, South Carolina five and Georgia three.</p>
  <p>When vacancies happen in the Representation from any State, the Executive Authority thereof shall issue Writs of Election to fill such Vacancies.</p>
  <p>The House of Representatives shall chuse their Speaker and other Officers; and shall have the sole Power of Impeachment.</p>
</div>

——

var numElmnts = $("#pagination p").length;
var lastIndex = 0;
$(".next").click(function(){
  var nextIndex = (lastIndex >= (numElmnts-1)) ? 0 : (lastIndex+1) ;
  var nextParag = $("#pagination p:eq("+nextIndex+")");
  $("#pagination").animate({ height: $(nextParag).outerHeight() }, 800, "linear", function(){
    $("#pagination").scrollTo(nextParag, 800);
  });
  lastIndex = nextIndex;
});

看看这个jquery插件: http://rascarlito.free.fr/hoverscroll/